如何根据使用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>

我想如果从父选择框中选择私人所有者，那么只应显示单个输入和特色输入，并使用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

我建议在HTML中明确定义选项之间的关系，以指示第二个option中的select应该可用于响应所选的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()。

Answer 2

您可以使用.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