Question

如何在选择任何选项组选项时运行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"/>

Answer 1

<强>的jsfiddle

http://jsfiddle.net/u76eynap/2/

<强> 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();
    }
});

Answer 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();
    });
});

<强> JSFiddle Demo

选择任何选项组选项时运行一些jQuery

2 个答案: