如何根據在第一個選擇框中使用jQuery選擇的值禁用第二個選擇框的額外選項

Question

我有2個選擇框，代碼如下。

家長選擇框

<select name="user_type" id="user_type"> 
    <option value="">Please Choose An Option</option> 
    <option value="PRIVATE OWNER">PRIVATE OWNER</option> 
    <option value="TRADER">TRADER</option> 
</select> 

兒童選擇框

<select name="package_type" id="package_type"> 
    <option value="">Please Choose An Option</option> 
    <option value="SINGLE ENTRY">SINGLE ENTRY</option> 
    <option value="FEATURED ENTRY">FEATURED ENTRY</option> 
    <option value="STANDARD">STANDARD</option> 
    <option value="ULTIMATE">ULTIMATE</option> 
</select> 

我想，如果是從父選擇框則只有單一的入口和特色ENTRY選擇私營業主應該出現和他們的其餘部分被移除或使用jquery刪除。

我對如何實現這一點沒有任何線索。

下面是我的jquery代碼，它不包括我所問的邏輯代碼，因爲我不知道如何動態添加或刪除標籤。

也請排除下面的代碼PHP的一部分，因爲它我自己的邏輯來從會話和數據庫中獲取的值，並將其提供給jQuery的變量等

請讓我知道我可以做到這件事。

<script type="text/javascript" charset="utf-8"> 
$(document).ready(function() { 
<?php 
// Pre Populate User From Session 
$user_type = $session->getSession("packages_user_type"); 
if ($user_type != "TRADER") 
{ 
?> 
    $('#package_type_container, #slots_container, #notes_ultimate').hide(); 
<? 
} 
?> 
    $('#user_type').change(function() 
    { 
     var user_type = $(this).val(); 
     if(user_type == "TRADER") 
     { 
      $('#package_type_container').slideDown().show(); 
      $('#slots_container').slideDown().show(); 
     } 
     else 
     { 
      $("#package_type").find("option:selected").removeAttr('selected'); 
      $('#package_type_container').slideUp(); 
      $('#slots_container').slideUp(); 
     } 
    }); 

    $('#package_type').change(function() 
    { 
     var package_type = $(this).val(); 
     if(package_type == "SINGLE ENTRY") 
     { 
      $('#slots').val('1').attr('readonly', true); 
      $('#cost').val('').removeAttr('readonly'); 
     } 
     else if(package_type == "FEATURED ENTRY") 
     { 
      $('#slots').val('1').attr('readonly', true); 
      $('#cost').val('').removeAttr('readonly'); 
     } 
     else if (package_type == "ULTIMATE") 
     { 
      $('#notes_ultimate').slideDown().show(); 
      $('#slots').val('').removeAttr('readonly'); 
      $('#cost').val('0').attr('readonly', true); 
     } 
     else 
     { 
      $('#notes_ultimate').hide(); 
      $('#slots').val('').removeAttr('readonly'); 
      $('#cost').val('').removeAttr('readonly'); 
     } 
    }); 
}); 
</script> 

Answer 1

你可以做這樣的事情用.detach()刪除選項，然後附加相關選項後

var $popts = $('#package_type option'); // store all available options 
var sel = { 
    "default": $popts.eq(0), 
    "PRIVATE OWNER": $popts.slice(1,3), // available values for PRIVATE OWNER 
    "TRADER": $popts.slice(1) // available values for TRADER 
}; 

$('#user_type').change(function(){ 
    // detach all options 
    $('#package_type option').detach(); 
    // if value is '' then append the default - else append the correct options 
    $('#package_type').append(this.value == '' ? sel['default'] : sel[this.value]);  
});​ 

FIDDLE

Answer 2

我建議明確在之間的HTML定義的關係指示第二個select中option應該可用於響應所選option的選項（使用自定義data-*屬性）從第一，所以我會使用類似以下內容：

HTML：

<select name="user_type" id="user_type"> 
    <option value="">Please Choose An Option</option> 
    <option value="private owner">private owner</option> 
    <option value="trader">trader</option> 
</select> 

<select name="package_type" id="package_type"> 
    <option value="">Please Choose An Option</option> 
    <option value="single entry" data-relatesTo="privateOwner trader">single entry</option> 
    <option value="featured entry" data-relatesTo="privateOwner trader">featured entry</option> 
    <option value="standard" data-relatesTo="trader">standard</option> 
    <option value="ultimate" data-relatesTo="trader">ultimate</option> 
</select>​ 

的jQuery：

$('#user_type').change(
    function() { 
     // camel-cases the value of the selected option 
     var v = $(this).val().replace(/\s+(\w)/, function(a) { 
      return a.replace(/(^\s+)/, '').toUpperCase(); 
     }); 
     // finds all disabled options and un-disables/enables them 
     $('#package_type option:disabled').prop('disabled', false); 
     // selects all options in the second select 
     $('#package_type option').filter(

     function() { 
      // caches the current $(this) object, since we might use it more than once 
      var that = $(this); 
      // returns the current $(this) if it has a value that's not an empty string 
      // AND 
      // if the camel-cased value (from above) is *not* found in the 
      // data-relatesTo attribute 
      return that.val() !== '' && that.attr('data-relatesTo').indexOf(v) === -1; 
     }).prop('disabled', true); 
    });​ 

JS Fiddle demo。

參考文獻：

• 的JavaScript：

  • indexOf()。
  • regular expressions。
  • replace()。
  • String.toUpperCase()。

• 的jQuery：

  • attr()。
  • change()。
  • :disabled selector。
  • filter()。
  • prop()。
  • val()。