Обновить ввод текста из выбранной опции

Question

У меня есть поле выбора, которое также обновляет текстовое поле при выборе с ценой этого выбранного варианта. Любые идеи о том, почему это не будет работать?

Html:

<label for="material1" class="select">Material:</label>
<select name="material" id="material1" data-native-menu="false" rel="price1">
<option>Select Material</option>
<option value="55 Bolt" rel="125,000.00">55 Bolt</option>
</select>
<label for="net1">Net Price:</label>
<input type="text" name="net" id="net1" rel="price1" value=""  />

JS:

<script type="text/javascript">
$("material1").change(function () {
   $(this).next("input[rel="+$(this).attr("rel")+"]").val($(this).val());
   $('#net1').textinput('refresh');

}).change();
</script>

Answer 1

Ваша главная проблема здесь, и mgoeppner также предлагает несколько хороших предложений.

$(this).next("input[rel="+$(this).attr("rel")+"]").val($(this).val());

$(this).val() относится к значению select, которое является нулевым.Вы должны обратиться к значению выбранной опции.Тогда next() не будет работать, потому что input не рядом с select, между ними есть label.Вы можете использовать closest()

var value = $(this).find('option:selected').val();
$(this).closest("input[rel="+$(this).attr("rel")+"]").val(value);

Answer 2

Это не сработает по нескольким причинам:

1. $(this).next() вернет [], так как следующий брат <label> не является входом с соответствующим атрибутом rel. Попробуйте использовать $(this).siblings("input[rel="+$(this).attr("rel")+"]") вместо.

2. В jQuery API нет функции textinput(). Возможно, вы имели в виду text()?

Наконец, вам не нужно делать $(...).change(function()...).change() - $(...).change(function()...) будет достаточно.