2010-08-10 23 views
0

我有一個關於選擇標籤選項的查詢。任何人通過jQuery解決。 假設我有兩個選擇標籤,在第一個選擇標籤中我有語言和腳本選項,而在選擇的第二個標籤中我有關於語言&腳本的選項。問題是,如果我從第一個選擇標記中選擇語言,而不是隻有語言選項應該在第二個標記中可見。像如何通過jQuery禁用選擇標籤選項?需要幫助

<select id="Languages"> 
    <option value="0">--Select--</option> 
    <option value="1">Languages</option> 
    <option value="2">Scripting</option> 
</select> 
<select id="Scripting"> 
    <option value="0">--Select--</option> 
    <option value="1">C#</option> 
    <option value="2">VB</option> 
    <option value="3">PHP</option> 
    <option value="4">jQuery</option> 
    <option value="5">javascript</option> 
</select> 

現在,如果我選擇語言選項只有C#,VB & PHP應該是可見的,所有其他選項都將禁用。

回答

0

你可以對此做兩點認可。

  1. 對選擇的元素在id的開頭的字符串,即:

<選擇ID = 「first_select」> <選項ID = 「郎」>郎 <選項ID = 「腳本>腳本 < /選擇>

<選擇ID =」 second_select 「> <選項ID =」 lang_1" >郎1 < option id =「script_1」腳本1 </select>

第一次選擇綁定on change事件。

$('#first_select').change(function() { 
    var type = $(this).attr('id'); 
    $('#second_select option').hide() // Hide all to just show the ones matching type 
    $('#second_select option[id^=' + type + ']').show() 
}); 

二:幾乎相同,但相反,您使用1選擇爲第一個選擇元素中的每個類型。並在變化哈德,並顯示適當的。

..fredrik

+0

顯示和隱藏''

0

這裏有一個基本的模板,使得它比較容易配置:

var languagePairings = { 
    language1: ['languageA', 'languageB'], 
    language2: ['languageC', 'languageD'] 
}; 

$(function() { 
    $('#select1').change(function() { 
     var $select2 = $('#select2'), 
      val = $(this).val(), 
      availableLanguages = languagePairings[val]; 
     if (availableLanguages && availableLanguages.length) { 
      for (var i = 0; i < availableLanguages.length; i++) { 
       var lang = availableLanguages[i]; 
       $select2.append($('<option />').attr('value', lang).text(lang)); 
      } 
     } else { 
      $select2.empty(); 
     } 
    }); 
}); 
0

首先請查看文章的Selected from jquery。我想,你的代碼會是這個樣子:

<select name="select1" id="select1"> 
    <option class="script">Scripting</option> 
    <option class="language">Languages</option> 
</select> 

<select name="select2" id="select2"> 
    <option class="script">javascript</option> 
    <option class="language">C#</option> 
    <option class="script language">jQuery</option> 
</select> 

<script type="text/javascript"> 
    $("#select1").change(function() { 
    $("#select2 option").disabled = true; 
    $("#select1 option:selected").each(function() { 
     var classname = $("#select1").attr("class"); 
     $("#select2 ."+classname).disabled = false; 
    }); 
    }) 
    .trigger('change'); 
</script> 

這是僞,現成的,頂級我的頭的代碼,你可能需要將其修改了一點,但總的想法是,你會爲這些選項分配一個類並使用這些類的值來控制第二個表中可用的選項。

編輯:看起來像躲不上的選項工作,所以你可能會分別代替「殘疾人= [布爾]」上面.show()的調用或.hide()。還檢查了這個早期問題:

Hide options in a select list using jQuery

0

互斥選擇:

<select name="st[]" prev_value=""> 
    <option value=""></option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
</select> 
<select name="st[]" prev_value=""> 
    <option value=""></option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
</select> 
<script> 
$("select[name='st[]']").live('change', function() 
             {if (this.value) 
              {$("select[name='st[]'] option[value='"+this.value+"']:not(:selected)").remove(); 
              } 
             if ($(this).attr('prev_value')) 
              {var prev_option=$(this).find("option[value='"+$(this).attr('prev_value')+"']"); 
              $("select[name='st[]']").not(this).append(prev_option.clone()); 
              } 
             $(this).attr('prev_value', this.value); 
             } 
          ); 
</script>