0

我有 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>
4

2 回答 2

1

我建议在 HTML 中明确定义选项之间的关系，指示option第二个中的 sselect应该可用以响应从第一个中选择的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 小提琴演示。

参考：

于 2012-12-26T15:35:42.540 回答
0

您可以使用.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]);    
});​

小提琴

于 2012-12-26T15:26:38.263 回答