Question

我需要从div ID获取所有选中的输入，这些输入与下拉选择选项的Select Value相匹配。

例如：

如果在下拉列表中选择了选项1 如果用户单击选项二或选项三中的输入，则没有任何操作，但是当用户单击选项1中的输入时，将返回已检查项目值。

同样如果在下拉列表中选择了选项2，并且如果用户单击选项2中的输入，则从div #two返回选中的项目值。

同样如果在下拉列表中选择了选项3，并且如果用户单击选项3中的输入，则从div #three返回已检查项目值。

<br>
<label class="title">Select Option</label>
<div class="options">
    <select class="select-menu-type">
        <option value="one"> Option one </option>
        <option value="two"> Option two </option>
        <option value="three"> Option three </option>
    </select>
</div>
<br>
<div id="one">
    <label class="title">option one</label>
    <fieldset class="options-block">
        <input type="radio" name="option-one-a" value="red">
        <label for="red">Red</label>
        <input type="radio" name="option-one-a" value="blue">
        <label for="blue">Blue</label>
        <input type="radio" name="option-one-a" value="green">
        <label for="green">Green</label>

       <br>

        <input type="radio" name="option-one-b" value="grey">
        <label for="grey">grey</label>
        <input type="radio" name="option-one-b" value="purple">
        <label for="purple">purple</label>
        <input type="radio" name="option-one-b" value="lime">
        <label for="lime">lime</label>

    </fieldset>
</div>
<div id="two">
    <label class="title">option two</label>
    <fieldset class="options-block">
        <input type="radio" name="option-two-a" value="yellow">
        <label for="yellow">yellow</label>
        <input type="radio" name="option-two-a" value="brown">
        <label for="brown">brown</label>
        <input type="radio" name="option-two-a" value="orange">
        <label for="orange">orange</label>

        <br>

        <input type="radio" name="option-two-b" value="amber">
        <label for="amber">amber</label>
        <input type="radio" name="option-two-b" value="blue">
        <label for="blue">Blue</label>
        <input type="radio" name="option-two-b" value="green">
        <label for="green">Green</label>        
    </fieldset>
</div>
<div id="three">
    <label class="title">option three</label>
    <fieldset class="options-block">
        <input type="radio" name="option-three-a" value="pink">
        <label for="pink">pink</label>
        <input type="radio" name="option-three-a" value="black">
        <label for="black">black</label>
        <input type="radio" name="option-three-a" value="white">
        <label for="white">white</label>

        <br>

        <input type="radio" name="option-three-b" value="red">
        <label for="red">Red</label>
        <input type="radio" name="option-three-b" value="blue">
        <label for="blue">Blue</label>
        <input type="radio" name="option-three-b" value="green">
        <label for="green">Green</label>

    </fieldset>

</div>
<br>
<p class="result"> Your Clicked : </p>

Answer 1

如果选择了一个选项，为什么不隐藏另一个div框？

如果选择了一个选项，则隐藏div #two和div #three

Answer 2

var selectedOption = $('.select-menu-type').val();

$('#' + selectedOption + ' input:checked') // holds all checked inputs inside the "selected" div

Answer 3

使用单选按钮的下拉列表值。

var checked = $("#" + $(".select-menu-type")).find(":radio:checked");

Jquery从Div #ID匹配选择选项获取检查输入

3 个答案: