1

複数のドロップダウン リストを持つ Web フォームがあります。最初のリストの選択と同じ値を共有する 2 番目のリストのオプションのみを表示したいと思います。

<!-- Dropdown #1 -->

<div class="control-group">
            <label class="control-label" for="select01">Select Tier</label>
            <div class="controls">
              <select id="select01">
                <option value="all">All Tiers</option>
                <option value="db">Database Tier</option>
                <option value="app">Application Tier</option>
                <option value="web">Web Tier</option>
              </select>
            </div>
          </div>


<!-- Dropdown #2 -->

<div class="control-group">
            <label class="control-label" for="select01">Select Audit Point</label>
            <div class="controls">
              <select id="select03">
                <option value="all">Software Version</option>
                <option value="all">Server OS, Memory, CPU</option>
                <option value="all">High Availability</option>
                <option value="db">DBMS Version</option>
                <option value="db">DBMS Statistics</option>
                <option value="db">DBMS Parameters</option>
                <option value="db">DBMS Data File Growth</option>
                <option value="db">Database Disk Structure</option>
                <option value="db">Long Running SQL</option>
                <option value="db">Security Data Growth Range</option>
                <option value="db">Extraneous entries in System Tables</option>
                <option value="db">Feed Error Orphans</option>
                <option value="db">Position Detail Orphans</option>
                <option value="db">Data Retention Policy</option>
                <option value="db">Securities Added Daily</option>
                <option value="db">Security Master Load</option>
                <option value="db">SRM Purge</option>
                <option value="db">Best Pricing Purge</option>
                <option value="db">Partitioning</option>
                <option value="db">DBMS Data/Log File Utilize Shared Disk</option>
                <option value="db">DBMS Failover</option>
                <option value="app">DBMS Client Version</option>
                <option value="app">Star Engine IP Configuration</option>
                <option value="app">Engine Count/Configuration</option>
                <option value="app">STAR Engine Logging Interval</option>
                <option value="app">PACE Engine Port Configuration</option>
                <option value="app">PACE Server Logging</option>
                <option value="app">PACE Engine Log Configuration</option>
                <option value="app">STAR Engine Load Balancer Interval</option>
                <option value="app">Engines Restarted Weekly</option>
                <option value="app">Designated Master</option>
                <option value="app">Cluster Managers Identical</option>
                <option value="app">Uploader Shared Disk Space</option>
                <option value="app">Custom Archive Rule Shared Disk Space</option>
                <option value="app">App Server Clustering</option>
                <option value="app">PACE Event Concurrency</option>
                <option value="web">Homogenous Engine Configuration</option>
                <option value="web">Log Levels</option>
                <option value="web">Scheduler Purging</option>
                <option value="web">Web Server Services Restarted Weekly</option>
                <option value="web">Email Notification Basic Configuration</option>
                <option value="web"n>Web Load Balancer Configuration</option>
                <option value="web">Load Balancer Customizations</option>
                <option value="web">Portal Shared Disk Space</option>
                <option value="web">Message Center Shared Disk Space</option>
                <option value="web">Message Center ID'S</option>
                <option value="web">Schedule Service Config</option>
                <option value="web">ePace is a client of Clustered App Servers</option>
                <option value="web">Portal is a client of Clustered App Servers</option>
                <option value="web">ESTAR is a client of Clustered Load Balancers</option>
                <option value="web">ESTAR is a client of Clustered Engines</option>
                <option value="web">ESTAR is a client of Clustered Report Export Services</option>
                <option value="web">WebSync Configured</option>
                <option value="web">Web Server Load Balancing Configured</option>
                <option value="web">Shared Disk Dynamic Folder</option>

リスト 1 の選択を継続的に変更できるようにする必要があるため、2 番目のリストで一致しないオプションを .remove() することはできません。それらを削除した場合は、最初のリストから新しい選択を行うたびに、2 番目のリストを再設定する必要があります。

ご協力ありがとうございました。

4

4 に答える 4

1

select要素内でオプション値を重複させることはできません。

options タグを保持する別の要素を用意することをお勧めします。そして、valueをdata-value属性に置き換えます。

これを試して

$('#select01').on('change', function() {

    var $select03 = $('#select03'),
        currValue = this.value;

    $select03.empty();

    var $options = $('.template option').filter(function() {
          return $(this).data('value') === currValue  
    }).get();

    $select03.append($options);
}).change();

働くフィドル

于 2013-06-25T17:41:41.043 に答える
1

次のようにオプションを無効にできます。

$("#select01").change(function() {
    //Get value from the selected option
    var filter = this.value;

    //Loop thru second select options
    $("#select02 option").each(function() {
        //Enable the option (used for if the select changes values)
        $(this).prop("disabled", false);

        //Compare second select values to the initial selected value
        if (this.value != filter) {

            //Disable options that do not match
            $(this).prop("disabled", true);
        }
    });
});

デモ: http://jsfiddle.net/QXhRy/

オプションを完全に削除することもできると思いますがselect、最初のドロップダウンを変更するたびに再構築する必要があります。

于 2013-06-25T17:46:22.473 に答える
1

文字列配列の「マップ」を作成し、必要に応じてこれから入力します。

// initialize options on page load
var options = new Array();
options["all"] = new Array("A","B","C");
options["db"] = new Array("D","E","F");

function changeSecondDropDown(selectedValue)
{
  // clear options from second drop down list
  ...

  var optionsToAdd = options[selectedValue]
  // loop through options and add them to second drop down list
  ...
}
于 2013-06-25T17:50:00.007 に答える