2017-07-29 36 views
6

Trong toàn bộ kịch bản này, tôi muốn làm điều này trong khi chọn 1 tùy chọn cha mẹ chọn và chọn con có thể hiển thị tất cả các tùy chọn có liên quan với cha mẹ chọn giá trị cha mẹ và con là giống nhau trong mã HTML.cách thay đổi tùy chọn của một lựa chọn trong khi chọn một lựa chọn khác?

$("#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>

Trả lời

2

bạn chỉ có thể ẩn tất cả các tùy chọn trong xử lý sự kiện và hiển thị các tùy chọn với giá trị khớp lệnh, một cái gì đó như thế này:

$("#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>

+0

khi chọn tùy chọn đầu tiên mẹ nó cho thấy tất cả các tùy chọn con –

+0

bạn có thể thêm một sự kiện thay đổi kích hoạt để chọn sau khi tải. nó hoạt dộng bây giờ. – Dij

+0

khi tôi chọn một tùy chọn khác, nó vẫn giữ nguyên như hiển thị lựa chọn đầu tiên –

1

bạn có thể tạo một hàm "bộ lọc" phù thủy sẽ lọc 2 chọn với tham số "dữ liệu cha mẹ"

$(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>

0

Lưu tất cả tùy chọn con quý vị trong một bộ sưu tập cụ thể sau đó tải chúng trong trình đơn thả xuống dựa trên phụ huynh chọn giảm giá trị xuống. Ở đây tôi đề nghị trước đây của tôi solution

0

thử điều này:

$("#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>

Các vấn đề liên quan