下拉框取決於在另一個下拉框中選擇的選項
[英]Drop-down box dependent on the option selected in another drop-down box
問題描述
我在一個表單中有 2 個不同的 SELECT OPTION。
第一個是源，第二個是狀態。 我希望在我的狀態下拉列表中有不同的選項，具體取決於在我的源下拉列表中選擇的選項。
來源：
<select id="source" name="source">
<option>MANUAL</option>
<option>ONLINE</option>
</select>
地位：
<select id="status" name="status">
</select>
選項： - 如果來源為 MANUAL，則狀態為 OPEN 或 DELIVERED - 如果來源為 ONLINE，則狀態為 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>
8 個解決方案
解決方案1
12 已采納 2013-11-01 14:50:09
嘗試這樣的事情...... jsfiddle演示
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).on('ready', function () {
$("#source").on('change', function () {
var el = $(this);
if (el.val() === "ONLINE") {
$("#status").append("<option>SHIPPED</option>");
} else if (el.val() === "MANUAL") {
$("#status option:last-child").remove();
}
});
});
解決方案2
10 2016-01-20 14:47:26
我發布這個答案是因為通過這種方式你將永遠不需要任何像 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>
更多細節，我的意思是動態和更多的依賴請看我的文章 創建動態下拉列表
解決方案3
2 2013-11-01 15:05:30
在這個 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
);
[ Edit 2021 ] 或使用數據屬性，例如：
document.addEventListener("change", checkSelect); function checkSelect(evt) { const origin = evt.target; if (origin.dataset.dependentSelector) { const selectedOptFrom = origin.querySelector("option:checked") .dataset.dependentOpt || "n/a"; const addRemove = optData => (optData || "") === selectedOptFrom ? "add" : "remove"; document.querySelectorAll(`${origin.dataset.dependentSelector} option`) .forEach( opt => opt.classList[addRemove(opt.dataset.fromDependent)]("display") ); } }
[data-from-dependent] { display: none; } [data-from-dependent].display { display: initial; }
<select id="source" name="source" data-dependent-selector="#status"> <option>MANUAL</option> <option data-dependent-opt="ONLINE">ONLINE</option> <option data-dependent-opt="UNKNOWN">UNKNOWN</option> </select> <select id="status" name="status"> <option>OPEN</option> <option>DELIVERED</option> <option data-from-dependent="ONLINE">SHIPPED</option> <option data-from-dependent="UNKNOWN">SHOULD SELECT</option> <option data-from-dependent="UNKNOWN">MAYBE IN TRANSIT</option> </select>
解決方案4
2 2014-11-27 07:50:01
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>
解決方案5
0 2013-11-01 14:48:33
你最好做兩個selects並顯示一個同時隱藏另一個。
它更容易，並且使用您的方法向selects添加options在 IE8 中不起作用（如果您關心）。
解決方案6
0 2017-03-27 07:52:03
我希望以下代碼可以幫助或解決您的問題，或者您認為無法理解，請訪問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>
通過 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 } } ?>
解決方案7
0 2018-10-04 18:15:41
為此，我注意到顯示和隱藏標簽比為 DOM 添加和刪除標簽要好得多。 它的性能更好。
解決方案8
0 2021-07-06 22:17:50
應該更新答案以替換已失效的函數.change & .ready
$(document).on('ready',function() {
$("#source").on('change', function(){
var el = $(this);
if (el.val() === "ONLINE") {
$("#status").append("<option>SHIPPED</option>");
} else if (el.val() === "MANUAL") {
$("#status option:last-child").remove();
}
});
});
如何使用取決於另一個下拉列表中所選選項的下拉列表顯示表格簡碼
[英]how to display table shortcode with a drop-down list that depends on the selected option in another drop-down list
根據另一個下拉列表中的所選選項更改下拉列表中的項目
[英]Change items in a drop-down list depending on the selected option in another drop-down list
在下拉列表中選擇一個選項時，在表的行上顯示輸入文本框
[英]Show input text-box on the row of the table when an option is selected on a drop-down list
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.