下拉框取决于在另一个下拉框中选择的选项
Posted
技术标签:
【中文标题】下拉框取决于在另一个下拉框中选择的选项【英文标题】：Drop-down box dependent on the option selected in another drop-down box 【发布时间】：2013-11-12 18:23:24 【问题描述】：我在一个表单中有 2 个不同的 SELECT OPTION。
第一个是源，第二个是状态。我想在我的状态下拉列表中有不同的选项，这取决于我在源下拉列表中选择的选项。
来源：
<select id="source" name="source">
<option>MANUAL</option>
<option>ONLINE</option>
</select>
状态：
<select id="status" name="status">
</select>
选项： - 如果 Source 为 MANUAL，则 Status 为 OPEN 或 DELIVERED - 如果 Source 为 ONLINE，则 Status 为 OPEN、DELIVERED 或 SHPPED
我的非工作尝试：
<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>
【问题讨论】：
希望这会有所帮助。 ***.com/questions/6573487/… 我在 ** $("#status").append(''); 附近有一点问题** 假设我必须将选定的选项附加到我的多个下拉列表中：` $("#status").append(''); $("#status").append(''); $("#status").append(''); ` 所以我希望我的下拉菜单已经被选中，无需手动再次选择。 【参考方案1】：试试这样的...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).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】：我发布这个答案是因为这样你就永远不需要像 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
【讨论】：
【参考方案3】： 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;
* 状态： - 选择 - 卡纳塔克邦 泰米尔纳德邦 安德拉邦 泰尔加纳
<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>
【讨论】：
请提供一些细节【参考方案4】：在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
);
[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>【讨论】：
几乎是我想要的，但是如何在selectcountries下添加<option>All</option>？【参考方案5】：
你最好制作两个selects并显示一个而隐藏另一个。
这更容易，并且使用您的方法将options 添加到selects 将无法在 IE8 中工作（如果您愿意的话）。
【讨论】：
【参考方案6】：我希望以下代码可以帮助或解决您的问题，或者您认为这不是可以理解的，请访问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】：为此，我注意到显示和隐藏标签比为 DOM 添加和删除标签要好得多。这样效果会更好。
【讨论】：
【参考方案8】：应该更新答案以替换已失效的函数.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();
);
);
【讨论】：
以上是关于下拉框取决于在另一个下拉框中选择的选项的主要内容，如果未能解决你的问题，请参考以下文章
在用selenium （语言 Java）选择下拉框中的选项时，遇到如图：input做的下拉框，不知怎么选择