下拉框取決於在另一個下拉框中選擇的選項

第一個是Source，第二個是Status。我想在我的「狀態」下拉列表中選擇不同的選項，具體取決於在我的「來源」下拉列表中選擇的選項。

來源：

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

狀態：

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

</select>

選項： - 如果來源是手動的，那麼狀態是常開或交付 - 如果來源是在線，則狀態是常開或交付或發貨

我的非工作嘗試：

  <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>

來源

2013-11-01 samyb8

**的問題，要求代碼必須展示出一種最小了解正在解決的問題。包括嘗試解決方案，爲什麼他們不工作，以及預期的結果。** – 2013-11-01 14:24:46

希望這有助於。 http://stackoverflow.com/questions/6573487/jquery-validation-select-required-if-checkbox-checked – usernolongerregistered

對不起，添加了我的JavaScript嘗試 – 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>

$(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() ; } 
    }); 

});

來源

2013-11-01 14:50:09

你最好兩個selects並顯示一個隱藏另一個。

這很容易，並添加options到selects與您的方法將無法在IE8（如果你照顧）。

來源

2013-11-01 14:48:33

在this jsfiddle你會發現一個解決方案，我deviced。這個想法是在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 
);

來源

2013-11-01 15:05:30 KooiInc

幾乎我想要的，但如何在selectcountries下添加''？ – Elyor

檢查原始jsfiddle的這個叉子：http://jsfiddle.net/KooiInc/6w51b6uv/ – 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; 
     } 

    }

* 州：請選擇 - 卡納塔克邦泰米爾納德安得拉邦 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>

來源

2014-11-27 07:50:01 chetan

請給出一些細節 –

我張貼這個答案，因爲這樣你將永遠不會需要像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>

有關詳細信息，我的意思是讓活力，更加依賴請看看這個鏈接create dynamic drop-down list

來源

2016-01-20 14:47:26 Jyotiranjan

我希望下面的代碼將幫助或解決您的問題，或者您認爲不就是可以理解的訪問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>

抵達STATES通過Ajax

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

READ狀態數據庫使用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 } } ?>

來源

2017-03-27 07:52:03 Ace

下拉框取決於在另一個下拉框中選擇的選項

回答

相關問題