使用正則表達式與jQuery從下拉菜單中選擇選項

-1

我需要一些jQuery的幫助，我敢肯定它很愚蠢，但讓我陷入困境。在第一個下拉列表中是產品列表。第二個是與產品相關的內容列表。我需要顯示/隱藏第二個下拉菜單中的內容，具體取決於第一個選擇的內容。使用正則表達式與jQuery從下拉菜單中選擇選項

例如：如果我在第一個列表中選擇「FOO」，值爲1213，我需要從第二個列表中選擇值1213-3973和1213-3953。這兩個菜單中的值顯然都是動態的，但會始終具有給定的格式，即：contentselect選項中的值始終爲{product_id} - {content_id}

起初，對於html沒有超級知識，有一個自定義屬性設置在contentselect形式，我有我的jquery選擇器抓取。但是，似乎並非所有瀏覽器都喜歡自定義屬性。

因爲它現在，我不知道該怎麼做。我被告知我需要某種正則表達式，但我不確定從哪裏開始。

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

來源

2012-02-07 badideas

如果第二元件是'多個= 「多個」'？ – Oybek 2012-02-07 13:29:48

對不起。現在我明白你想要什麼了。只留下那些相關的值。 – Oybek 2012-02-07 13:31:12

http://api.jquery.com/attribute-starts-with-selector/，但是用ajax動態加載內容將是一個更好的方法 – 2012-02-07 13:31:14

不幸的是，在不支持跨瀏覽器的選擇中隱藏或禁用選項。見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)); 
    }); 
});

來源

2012-02-07 14:28:10

那麼，你選擇的路徑有點容易出錯。選擇在IE中引發一些問題。你不能在IE中顯示隱藏你的選項。 Proof。而且，做所有這些複雜的id是相當棘手的。最後，如果你的輸入之間有很多複雜的關係，那麼在某些時候你的代碼將變得完全無法管理。

我建議你通過MVVM模式更優雅的方法。這有助於通過將您的data與presentation分開來保持代碼清潔。 Here是工作示例。

P.S.它使用Knockout.js庫。

來源

2012-02-07 13:48:13 Oybek

使用正則表達式與jQuery從下拉菜單中選擇選項

回答

相關問題