У меня есть 2 разных варианта выбора в форме.
Первый - Источник, второй - Статус. Я хотел бы иметь разные OPTIONS в моем раскрывающемся списке «Статус» в зависимости от OPTION, выбранного в моем раскрывающемся списке «Источник».
Источник:
<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>
попробуйте что-нибудь подобное... [Jsfiddle Demo][1]
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() ; }
});
});
Я публикую этот ответ, потому что таким образом вам никогда не понадобится какой-либо плагин, такой как 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>
Для получения более подробной информации я имею в виду динамическую и большую зависимость, пожалуйста, взгляните на мою статью создать динамический раскрывающийся список
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="lblSt">
<span class="red">*</span>
State:</label>
<select id="ddlStates" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);" >
<option>--Select--</option>
<option>Karnataka</option>
<option>Tamilnadu</option>
<option>Andra pradesh</option>
<option>Telngana</option>
</select>
<label id="lblState"></label>
</p>
</div>
<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>
В [ этом jsfiddle ][1] вы найдете решение, которое я разработал. Идея состоит в том, чтобы иметь пару селекторов в 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
);
Вам лучше сделать два «выбора» и показать один, скрывая другой.
Это проще, и добавление options
в selects
с вашим методом не будет работать в IE8 (если вам все равно).
Я надеюсь, что следующий код поможет или решит вашу проблему, или вы считаете, что это не так понятно, посетите http://phppot.com/jquery/jquery-зависимый-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>
& Лт; / 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 } } ?>