정규식을 jQuery와 함께 사용하여 드롭 다운 메뉴에서 옵션을 선택하십시오.

Question

일부 jquery에 대해서는 약간의 도움이 필요합니다.하지만 바보 같지만 저를 붙잡 았습니다. 첫 번째 드롭 다운에는 제품 목록이 있습니다. 두 번째 목록에는 제품과 관련된 콘텐츠 목록이 있습니다. 두 번째 드롭 다운에서 처음에 선택한 항목에 따라 corrent 내용을 표시하거나 숨길 필요가 있습니다.

예를 들어, 첫 번째 목록에서 "FOO"를 선택하면 값 1213으로 두 번째 목록에서 값 1213-3973과 1213-3953을 선택해야합니다. 두 메뉴의 값은 분명히 동적이지만 항상 다음과 같은 형식을 갖습니다. 즉, contentselect 옵션의 값은 항상 {product_id} - {content_id}

이고 처음에는 html에 대해 잘 알고 있지 않습니다. 내 jquery 선택기 잡아 가지고 contentselect 양식에 설정된 사용자 지정 특성이있었습니다. 그러나 모든 브라우저가 사용자 정의 속성을 좋아하는 것은 아닙니다.

지금과 같이 나는 무엇을 해야할지 정확히 모르겠습니다. 나는 어떤 종류의 정규 표현식이 필요할 것이라고 들었지만, 어디서부터 시작해야할지 모르겠습니다.

<script> 
function selectProduct() 
{ 
    //reset form 
    $('.form_contentselect option:selected').removeAttr("selected"); 

    var product_selected = $('.form_productselect option:selected').val(); 
    $('.form_contentselect').hide(); 
    /////////HELP HERE PLEASE////////// 
    //$('.form_contentselect option[???????????]').hide(); //HIDE irrelevant content 
    //$('.form_contentselect option[???????????]').show(); //SHOW associated content 
    /////////////////////////////////// 
    $('.form_contentselect').show(); 

} 
</script> 

<div class="form_productselect"> 
    <div class="form_item"> 
     Select Product: 
     <select name="product_id" onchange=selectProduct()> 
      <option value="0" selected="selected">--</option> 
      <option value="1213" >FOO</option> 
      <option value="1315" >BAR</option> 
     </select> 
    </div> 
</div> 

<div class="form_contentselect"> 
    <div class="form_item"> 
     Select Content: 
     <select name="content_id"> 
      <option value="0" selected="selected">--</option> 
      <option value="1213-3973" >FOO - 100 points</option> 
      <option value="1213-3953" >FOO - 1000 points</option> 
      <option value="1315-3965" >BAR - 100 points</option> 
      <option value="1315-3949" >BAR - 1000 points</option> 
     </select> 
    </div> 
</div> 

Answer 1

선택하지 않은 브라우저에서 옵션을 숨기거나 사용하지 않도록 설정합니다. this question을 참조하십시오.

최상의 옵션은 위의 링크 된 질문에서 this answer과 비슷할 것이라고 생각합니다.

Here is a working demo that is supported cross browser

HTML :

<div class="form_productselect"> 
    <div class="form_item"> 
     Select Product: 
     <select id="product_id" name="product_id"> 
      <option value="0" selected="selected">--</option> 
      <option value="1213" >FOO</option> 
      <option value="1315" >BAR</option> 
     </select> 
    </div> 
</div> 

<div class="form_contentselect"> 
    <div class="form_item"> 
     Select Content: 
     <select id="content_id" name="content_id"> 
      <option value="0" selected="selected">--</option> 
      <option value="1213-3973" class="opt-1213" >FOO - 100 points</option> 
      <option value="1213-3953" class="opt-1213" >FOO - 1000 points</option> 
      <option value="1315-3965" class="opt-1315" >BAR - 100 points</option> 
      <option value="1315-3949" class="opt-1315" >BAR - 1000 points</option> 
     </select> 
    </div> 
</div> 

JQuery와 :

$(document).ready(function() { 
    var allOptions = $('#content_id option').clone(); 
    $('#product_id').change(function() { 
     var val = $(this).val(); 
     $('#content_id').html(allOptions.filter('.opt-' + val)); 
    }); 
}); 

Answer 2

음, 선택한 경로는 오류가 발생하기 쉽습니다. Select는 IE에서 몇 가지 문제를 제기합니다. IE에서 옵션을 숨기고 표시 할 수는 없습니다. Proof. 게다가, 복잡한 id를 모두 처리하는 것은 매우 까다 롭습니다. 마지막으로 입력 사이에 복잡한 관계가 많으면 코드가 완전히 관리 할 수 ​​없게됩니다.

MVVM 패턴을 통해 좀 더 우아한 접근 방식을 제안합니다. 이렇게하면 presentation에서 data을 분리하여 코드를 깨끗하게 유지할 수 있습니다. Here이 실제 예입니다.

P. 그것은 Knockout.js 라이브러리를 사용합니다.