如何更改一个选择的选项，同时选择另一个？

Question

在这整个场景，我想这样做，而选择父母的1个选项，可以选择和孩子选择能显示其与父母选择父母和孩子值在HTML代码相同的所有相关选项。

$("#ref_type_text").change(function() { 
 
    var val = $(this).val(); 
 
    if (val == "item1") { 
 
     $("#ref_type_text_right").html("<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>"); 
 
    } else if (val == "item2") { 
 
     $("#ref_type_text_right").html("<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>"); 
 
    } else if (val == "item3") { 
 
     $("#ref_type_text_right").html("<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>$ 
 
<div class="left_pan">$ 
 
    <label for="ref_type_text">Reference <u>t</u>ype:</label>$ 
 
    <select name="ref_type_text" id="ref_type_text" class="dropdown" accesskey="t"> 
 
     <option value="1" selected="selected">Numbered item</option> 
 
     <option value="2">Heading</option> 
 
     <option value="3">Bookmark</option> 
 
     <option value="4">Footnote</option> 
 
    </select> 
 
</div> 
 
<div class="right_pan"> 
 
    <label for="insert_ref_text">Insert <u>r</u>eference to:</label> 
 
    <select name="ref_type_text_right" id="ref_type_text_right" class="dropdown" accesskey="t"> 
 
     <option value="1" selected="selected">Page number</option> 
 
     <option value="1">Paragraph number</option> 
 
     <option value="1">Paragraph number(no content)</option> 
 
     <option value="1">Paragraph number(full content)</option> 
 
     <option value="1">Paragraph Text</option> 
 
     <option value="1">Above/Below</option> 
 
     <option value="2">Heading text</option> 
 
     <option value="2">Page number</option> 
 
     <option value="2">Heading number</option> 
 
     <option value="2">Heading number(no content)</option> 
 
     <option value="2">Heading number(full content)</option> 
 
     <option value="2">Above/Below</option> 
 
     <option value="3">Bookmark text</option> 
 
     <option value="3">Page number</option> 
 
     <option value="3">Paragraph number</option> 
 
     <option value="3">Paragraph number(no content)</option> 
 
     <option value="3">Paragraph number(full content)</option> 
 
     <option value="3">Above/Below</option> 
 
     <option value="4">Footnote number</option> 
 
     <option value="4">Page number</option> 
 
     <option value="4">Above/Below</option> 
 
     <option value="4">Footnote number(formatted)</option> 
 
    </select> 
 
</div>

Answer 1

你可以只隐藏在事件处理程序中的所有选项，并显示相匹配的价值，像这样的选项：

$("#ref_type_text").change(function() { 
 
     var val = $(this).val(); 
 
     $("#ref_type_text_right option").hide(); 
 
     $("#ref_type_text_right option[value=" + val + "]").show(); 
 
    }); 
 
    $("#ref_type_text").trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="left_pan"> 
 
\t \t \t \t \t \t \t <label for="ref_type_text">Reference <u>t</u>ype:</label> 
 
\t \t \t \t \t \t \t <select name="ref_type_text" id="ref_type_text" class="dropdown" accesskey="t"> 
 
\t \t \t \t \t \t \t \t <option value="1" selected="selected">Numbered item</option> 
 
\t \t \t \t \t \t \t \t <option value="2">Heading</option> 
 
\t \t \t \t \t \t \t \t <option value="3">Bookmark</option> 
 
\t \t \t \t \t \t \t \t <option value="4">Footnote</option> 
 
\t \t \t \t \t \t \t </select> 
 
       </div> 
 
<div class="right_pan"> 
 
\t \t \t \t \t \t <label for="insert_ref_text">Insert <u>r</u>eference to:</label> 
 
\t \t \t \t \t \t <select name="ref_type_text_right" id="ref_type_text_right" class="dropdown" accesskey="t"> 
 
\t \t \t \t \t \t \t <option value="1" selected="selected">Page number</option> 
 
\t \t \t \t \t \t \t <option value="1">Paragraph number</option> 
 
\t \t \t \t \t \t \t <option value="1">Paragraph number(no content)</option> 
 
\t \t \t \t \t \t \t <option value="1">Paragraph number(full content)</option> 
 
\t \t \t \t \t \t \t <option value="1">Paragraph Text</option> 
 
\t \t \t \t \t \t \t <option value="1">Above/Below</option> 
 
\t \t \t \t \t \t \t <option value="2">Heading text</option> 
 
\t \t \t \t \t \t \t <option value="2">Page number</option> 
 
\t \t \t \t \t \t \t <option value="2">Heading number</option> 
 
\t \t \t \t \t \t \t <option value="2">Heading number(no content)</option> 
 
\t \t \t \t \t \t \t <option value="2">Heading number(full content)</option> 
 
\t \t \t \t \t \t \t <option value="2">Above/Below</option> 
 
\t \t \t \t \t \t \t <option value="3">Bookmark text</option> 
 
\t \t \t \t \t \t \t <option value="3">Page number</option> 
 
\t \t \t \t \t \t \t <option value="3">Paragraph number</option> 
 
\t \t \t \t \t \t \t <option value="3">Paragraph number(no content)</option> 
 
\t \t \t \t \t \t \t <option value="3">Paragraph number(full content)</option> 
 
\t \t \t \t \t \t \t <option value="3">Above/Below</option> 
 
\t \t \t \t \t \t \t <option value="4">Footnote number</option> 
 
\t \t \t \t \t \t \t <option value="4">Page number</option> 
 
\t \t \t \t \t \t \t <option value="4">Above/Below</option> 
 
\t \t \t \t \t \t \t <option value="4">Footnote number(formatted)</option> 
 
\t \t \t \t \t \t </select> 
 
      </div>

Answer 2

你可以创建一个功能“过滤器”巫婆将筛选2与参数“数据父”

$(function(){ 
 
    // declare the two select 
 
    $parentSelect = $("select[name=parentSelect]"); 
 
    $childSelect = $("select[name=childSelect]"); 
 

 
    // select the child items of first parent 
 
    filter($parentSelect,$childSelect); 
 

 
    // select the child items of selected parent 
 
    $parentSelect.change(function(){ 
 
     filter($(this),$childSelect); 
 
    }); 
 
}); 
 

 
function filter(parent,child){ 
 
    var selectedValue=$(parent).val(); 
 
    var childSelected = false; 
 
    $(child).find('option').each(function() { 
 
     if($(this).attr("data-parent") != selectedValue) 
 
      $(this).hide(); 
 
     else{ 
 
      $(this).show(); 
 
      if(childSelected === false){ 
 
       $(this).prop('selected', 'selected'); 
 
       childSelected = true; 
 
      } 
 
     }   
 
    }); 
 
}

select{ 
 
width:200px; 
 
font-size: 14px; 
 
padding: 4px 10px; 
 
margin: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parentItems"> 
 
    <select name="parentSelect"> 
 
     <option value="1">Parent 1</option> 
 
     <option value="2">Parent 2</option> 
 
     <option value="3">Parent 3</option> 
 
    </select> 
 
</div> 
 

 
<div class="ChildItems"> 
 
    <select name="childSelect"> 
 
     <option data-parent="1" value="11">child1-1</option> 
 
     <option data-parent="1" value="12">child1-2</option> 
 
     <option data-parent="1" value="13">child1-3</option> 
 
     <option data-parent="2" value="21">child2-1</option> 
 
     <option data-parent="2" value="22">child2-2</option> 
 
     <option data-parent="2" value="23">child2-3</option> 
 
     <option data-parent="3" value="31">child3-1</option> 
 
     <option data-parent="3" value="32">child3-2</option> 
 
     <option data-parent="3" value="33">child3-3</option> 
 
    </select> 
 
</div>

Answer 3

然后选择保存所有的孩子选择在特定集合，然后基于父选择下拉菜单中加载它们跌落值。在这里我建议我以前solution

Answer 4

试试这个：

$("#ref_type_text").change(function() { 
 
    $('#ref_type_text_right').val(
 
    $('#ref_type_text option:selected').val()) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="left_pan"> 
 
    <label for="ref_type_text">Reference <u>t</u>ype:</label> 
 
    <select name="ref_type_text" id="ref_type_text" class="dropdown"> 
 
     <option value="0" selected="selected">Numbered item</option> 
 
     <option value="1">Heading</option> 
 
     <option value="2">Bookmark</option> 
 
     <option value="3">Footnote</option> 
 
    </select> 
 
</div> 
 
<br> 
 
<div class="right_pan"> 
 
    <label for="insert_ref_text">Insert <u>r</u>eference to:</label> 
 
    <select name="ref_type_text_right" id="ref_type_text_right" class="dropdown" > 
 
     <option value="0" selected="selected">Page number</option> 
 
     <option value="1">Paragraph number</option> 
 
     <option value="2">Heading text</option> 
 
     <option value="3">Bookmark text</option> 
 
     <option value="4">Footnote number</option> 
 
    </select> 
 
</div>