问题描述
选择任何选项组选项后，如何运行jQuery。 在这种情况下，我要根据选择两个选项组之一中的任何选项来显示或隐藏输入。
的HTML
<select>
<option>Select</option>
<optgroup label="One">
<option value="1">Value 1.1</option>
<option value="2">Value 1.2</option>
<option value="3">Value 1.3</option>
</optgroup>
<optgroup label="Two">
<option value="4">Value 2.1</option>
<option value="5">Value 2.2</option>
<option value="6">Value 2.3</option>
</optgroup>
</select>
<input id="inputOne" type="text" placeholder="Input one"/>
<input id="inputTwo" type="text" placeholder="Input two"/>
1楼
JSFiddle
的HTML
<select>
<option>Select</option>
<optgroup label="One">
<option value="1">Value 1.1</option>
<option value="2">Value 1.2</option>
<option value="3">Value 1.3</option>
</optgroup>
<optgroup label="Two">
<option value="4">Value 2.1</option>
<option value="5">Value 2.2</option>
<option value="6">Value 2.3</option>
</optgroup>
</select>
JS
$("#inputOne, #inputTwo").hide();
$('select').change(function () {
if ($("select option:selected").parent()[0].label == "One") {
$("#inputOne").show();
$("#inputTwo").hide();
} else if ($("select option:selected").parent()[0].label == "Two") {
$("#inputTwo").show();
$("#inputOne").hide();
} else {
$("#inputOne, #inputTwo").hide();
}
});
2楼
试试这个：最初隐藏输入字段。 然后获取所选选项的父项并阅读其标签。 使用该标签识别输入并使之可见
HTML：
<input id="inputOne" type="text" placeholder="Input one" style="display:none;"/>
<input id="inputTwo" type="text" placeholder="Input two" style="display:none;"/>
jQuery的：
$(function(){
$('select').change(function(){
var $optionGroup = $(this).find('option:selected').closest('optgroup');
//use jquery start attribute selector to hide all inputs
$('input[id^=input]').hide();
//select input respective to selected optgroup and show it.
$('input[id=input' + $optionGroup.attr('label') + ']').show();
});
});