HTML摘录
Selection:
<select name="no_exam" id="no_exam">
<option value="" selected="selected">===select option===</option>
<option value="A+">100-75</option>
<option value="B+">50-74</option>
<option value="C+">0-49</option>
<option value="AB">AB</option>
<option value="NE">NE</option>
<option value="MC">MC</option>
</select>
</br>
Selected value:
<input type="text" name="std_marks" id="std_marks"/>
与上层HTML相关的Javascript
$("#no_exam").change(function() {
var textval = $(":selected",this).val();
$('input[name=std_marks]').val(textval);
// if value is selected, text field is readonly
result_form.std_marks.disabled=(!textval) ? false : true;
});
这段代码工作正常......但我想改变它。我的问题是选择组有两个类别......一个是标记&amp;另一个缺席..
--------------------------------------------------
* Marks category: 100-75,50-74,0-49
-----------------------------------------------------
* Absent category: AB,NE,MC
------------------------------------------------------
这里当我选择一个选项时,它的值会被复制到输入框。
当用户选择其中一个缺席类别选项但在选择标记选项时没有做任何事情时,如何更改此代码以复制所选选项的值?
演示链接: - Demo Link
答案 0 :(得分:0)
我已经将HTML稍微更改为实际分隔两个选项组,然后还将脚本更改为仅在选择其中一个组中的选项时将值复制到文本框(并禁用它)。
这是诀窍的changed JSFiddle。
Selection :
<select name="myOption" id="myOption">
<option value="" selected="selected">===select option===</option>
<optgroup label="Marks" data-process="0">
<option value="A+">100-75</option>
<option value="B+">50-74</option>
<option value="C+">0-49</option>
</optgroup>
<optgroup label="Absent" data-process="1">
<option value="AB">AB</option>
<option value="NE">NE</option>
<option value="MC">MC</option>
</optgroup>
</select></br>
Selected value :
<input type="text" name="student_mark" id="student_mark"/>
和脚本
$("#myOption").change(function() {
// get selected option
var option = $(":selected", this);
// get its value
var value = option.val();
// check if we need to copy value and disable input
var process = option.parent().data("process") | 0;
// get input box
var input = $("#student_mark")[0];
// set value and disable input
input.value = value && process ? value : "";
input.disabled = value && process && true || false;
});