web-dev-qa-db-ja.com

別のドロップダウンボックスで選択されたオプションに依存するドロップダウンボックス

フォームに2つの異なるSELECT OPTIONがあります。

最初はソース、2番目はステータスです。 [ソース]ドロップダウンで選択したオプションに応じて、[ステータス]ドロップダウンリストに異なるオプションを追加します。

ソース：

<select id="source" name="source">
     <option>MANUAL</option>
     <option>ONLINE</option>
</select>

状態：

<select id="status" name="status">

</select>

オプション：-ソースがMANUALの場合、ステータスはOPENまたはDELIVERED-ソースがオンラインの場合、ステータスはOPENまたはDELIVEREDまたはSHIPPED

私の動作しない試み：

            <script>
            $(document).ready(function () {
            var option = document.getElementById("status").options;
            if (document.getElementById('source').value == "MANUAL") {
                $("#status").append('<option>OPEN</option>');
                $("#status").append('<option>DELIVERED</option>');
                }
            if (document.getElementById('source').value == "ONLINE") {
                $("#status").append('<option>OPEN</option>');
                $("#status").append('<option>DELIVERED</option>');
                $("#status").append('<option>SHIPPED</option>');
                }
            });
            </script>
javascriptjqueryhtmlformsdrop-down-menu
6
samyb8

このようなものを試してみてください... jsfiddle demo

[〜＃〜] html [〜＃〜]

 Source:   <select id="source" name="source">
     <option>MANUAL</option>
     <option>ONLINE</option> </select>

Status:

<select id="status" name="status">
    <option>OPEN</option>
      <option>DELIVERED</option>
    </select>

[〜＃〜] js [〜＃〜]

$(document).ready(function() {

  $("#source").change(function() {

    var el = $(this) ;

    if(el.val() === "ONLINE" ) {
    $("#status").append("<option>SHIPPED</option>");
    }
      else if(el.val() === "MANUAL" ) {
        $("#status option:last-child").remove() ; }
  });

});
7
Psych Half

この方法でjQueryやその他のプラグインを必要とすることは決してないので、この答えを投稿しています。これには単純なJavaScriptによる解決策があります。

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script language="javascript" type="text/javascript">
    function dynamicdropdown(listindex)
    {
        switch (listindex)
        {
        case "manual" :
            document.getElementById("status").options[0]=new Option("Select status","");
            document.getElementById("status").options[1]=new Option("OPEN","open");
            document.getElementById("status").options[2]=new Option("DELIVERED","delivered");
            break;
        case "online" :
            document.getElementById("status").options[0]=new Option("Select status","");
            document.getElementById("status").options[1]=new Option("OPEN","open");
            document.getElementById("status").options[2]=new Option("DELIVERED","delivered");
            document.getElementById("status").options[3]=new Option("SHIPPED","shipped");
            break;
        }
        return true;
    }
    </script>
    </head>
    <title>Dynamic Drop Down List</title>
    <body>
    <div class="category_div" id="category_div">Source:
        <select id="source" name="source" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
        <option value="">Select source</option>
        <option value="manual">MANUAL</option>
        <option value="online">ONLINE</option>
        </select>
    </div>
    <div class="sub_category_div" id="sub_category_div">Status:
        <script type="text/javascript" language="JavaScript">
        document.write('<select name="status" id="status"><option value="">Select status</option></select>')
        </script>
        <noscript>
        <select id="status" name="status">
            <option value="open">OPEN</option>
            <option value="delivered">DELIVERED</option>
        </select>
        </noscript>
    </div>
    </body>
</html>

詳細については、動的で依存性を高めるために、私の記事をご覧ください 動的ドロップダウンリストの作成

4
Jyotiranjan

this jsfiddle に、デバイスを作成した解決策があります。アイデアは、htmlにセレクターペアを持ち、（プレーン）javascriptを使用して、最初の選択されたオプションに基づいて、依存セレクターのオプションをフィルター処理することです。例えば：

<select id="continents">
 <option value = 0>All</option>   
 <option value = 1>Asia</option>
 <option value = 2>Europe</option>
 <option value = 3>Africa</option>
</select> 
<select id="selectcountries"></select>

使用（jsFiddle内）

 MAIN.createRelatedSelector
     ( document.querySelector('#continents')           // from select element
      ,document.querySelector('#selectcountries')      // to select element
      ,{                                               // values object 
        Asia: ['China','Japan','North Korea',
               'South Korea','India','Malaysia',
               'Uzbekistan'],
        Europe: ['France','Belgium','Spain','Netherlands','Sweden','Germany'],
        Africa: ['Mali','Namibia','Botswana','Zimbabwe','Burkina Faso','Burundi']
      }
      ,function(a,b){return a>b ? 1 : a<b ? -1 : 0;}   // sort method
 );
1
KooiInc
    function dropdownlist(listindex)
    {
         document.getElementById("ddlCity").options.length = 0;
         switch (listindex) 
         {
             case "Karnataka":
                     document.getElementById("ddlCity").options[0] = new Option("--select--", "");
                     document.getElementById("ddlCity").options[1] = new Option("Dharawad", "Dharawad");
                     document.getElementById("ddlCity").options[2] = new Option("Haveri", "Haveri");
                     document.getElementById("ddlCity").options[3] = new Option("Belgum", "Belgum");
                     document.getElementById("ddlCity").options[4] = new Option("Bijapur", "Bijapur");

                 break;

             case "Tamilnadu":
                 document.getElementById("ddlCity").options[0] = new Option("--select--", "");
                 document.getElementById("ddlCity").options[1] = new Option("dgdf", "dgdf");
                 document.getElementById("ddlCity").options[2] = new Option("gffd", "gffd");


                 break;
         }

    }

*州：--Select-- Karnataka Tamilnadu Andra pradesh Telngana

    <div>
        <p>

            <label id="lblCt">
            <span class="red">*</span>
                City:</label>
            <select id="ddlCity">
               <!-- <option>--Select--</option>
                <option value="1">Dharawad</option>
                <option value="2">Belgum</option>
                <option value="3">Bagalkot</option>
                <option value="4">Haveri</option>
                <option>Hydrabadh</option>
                <option>Vijat vada</option>-->
            </select>
            <label id="lblCity"></label>
        </p>
    </div>
1
chetan

このため、DOMでタグを追加および削除するのではなく、タグを表示および非表示にする方がはるかに優れていることに気付きました。その方がパフォーマンスが良くなります。

0
asiby

次のコードがあなたの問題を助けるか解決するか、あなたがその理解できない訪問を考えていることを願っています http://phppot.com/jquery/jquery-dependent-dropdown-list-countries-and-states/ 。

HTML動的依存選択

<div class="frmDronpDown">
<div class="row">
    <label>Country:</label><br/>
    <select name="country" id="country-list" class="demoInputBox" onChange="getState(this.value);">
    <option value="">Select Country</option>
    <?php
    foreach($results as $country) {
    ?>
    <option value="<?php echo $country["id"]; ?>"><?php echo $country["name"]; ?></option>
    <?php
    }
    ?>
    </select>
</div>
<div class="row">
    <label>State:</label><br/>
    <select name="state" id="state-list" class="demoInputBox">
    <option value="">Select State</option>
    </select>
</div>

状態の取得VIA AJAX

<script> function getState(val) { $.ajax({
type: "POST",
url: "get_state.php",
data:'country_id='+val,
success: function(data){
    $("#state-list").html(data);
}
});} </script>

PHPを使用した状態データベースの読み取り

<?php require_once("dbcontroller.php"); $db_handle = new DBController();if(!empty($_POST["country_id"])) {
$query ="SELECT * FROM states WHERE countryID = '" . $_POST["country_id"] . "'";
$results = $db_handle->runQuery($query); ?> <option value="">Select State</option><?php foreach($results as $state) { ?> <option value="<?php echo $state["id"]; ?>"><?php echo $state["name"]; ?></option><?php } } ?>
0
Ace

2つのselectsを作成し、一方を表示し、もう一方を非表示にする方が良いでしょう。

それは簡単で、メソッドでoptionsをselectsに追加してもIE8では機能しません（気になる場合）。

0
Matthew Rapati