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>

親の選択ボックスから非公開所有者が選択されている場合は、SINGLE ENTRY と FEATURED ENTRY のみが表示され、残りは jquery を使用して削除または削除されます。

これを達成する方法についての手がかりはありません。

以下は私のjqueryコードです。タグを動的に追加または削除する方法がわからないため、私が求めていることに関するロジックのコードは含まれていません。

また、セッションとデータベースから値を取得してjquery変数などに提供するのは私自身のロジックであるため、以下のコードのphp部分を除外してください。

どうすればこのことを達成できるか教えてください。

<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 でオプション間の関係を明示的に定義することをお勧めします。これは、最初から選択された(カスタム属性を使用して)に応じてoption2 番目の sが使用可能であることを示すため、次のようなものを使用します。selectoptiondata-*

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 に答える