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

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">
							<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>