Geek Answers Handbook

How to change the parameters of one choice when choosing another?

In this scenario, I want to do this by selecting 1 parental option, and the child selection can display the entire option associated with the parent parent, and the child values ​​are the same in the HTML code.

$("#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>
Run codeHide result
+6
source share
4 answers

you can just hide all the parameters in the event handler and show the parameters with the corresponding value, something like this:

$("#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>
Run codeHide result
+2
source

you can create a "filter" function that will filter your selection 2 using the "data-parent" parameter

$(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>
Run codeHide result
+1
source

, .

0
source

try the following:

$("#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>
Run codeHide result
0
source

More articles:


All Articles