如何根据选择的另一个选择选项更改选择选项？答案

【问题标题】：how to change a selections options based on another select option selected?如何根据选择的另一个选择选项更改选择选项？
【发布时间】：2010-12-18 23:00:39
【问题描述】：

这是我的 html。

<select id="type">
<option value="item1">item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
</select>

<select id="size">
<option value="">-- select one -- </option>
</select>

这是我尝试但不成功的 jquery。

$(document).ready(function() {

if( $("#type").val("item1"))
{
  $("#size").html("<option value='test'>test</option><option value="test2">test2</option>);
}
elseif( $("#type").val("item2"))
{
   $("#size").html("<option value='anothertest1'>anothertest1</option>");
}

});

基本上我想要做的是，如果在#type 中选择了一个选项，那么尺寸选择将填充与其关联的选项。我该怎么做？

谢谢

【问题讨论】：

标签： jquery

【解决方案1】：

这是您尝试做的一个示例 => fiddle

$(document).ready(function () {
    $("#type").change(function () {
        var val = $(this).val();
        if (val == "item1") {
            $("#size").html("<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>");
        } else if (val == "item2") {
            $("#size").html("<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>");
        } else if (val == "item3") {
            $("#size").html("<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>");
        } else if (val == "item0") {
            $("#size").html("<option value=''>--select one--</option>");
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="type">
    <option value="item0">--Select an Item--</option>
    <option value="item1">item1</option>
    <option value="item2">item2</option>
    <option value="item3">item3</option>
</select>

<select id="size">
    <option value="">-- select one -- </option>
</select>

【讨论】：

这里还有一个更简洁的例子。在这种情况下，内容被重构为一个 JavaScript 数组。这极大地简化了“更改”逻辑。更容易维护。 jsfiddle.net/YPsqQ/1
谢谢，这正是我所需要的。我不太确定要试试 == 下次生病试试谢谢。
greaaaaaat 回答！，现在我想尝试更改布局。
这个例子的唯一问题（原样）是它没有设置初始状态的值（项目1）。您需要将其更改为一个值，然后返回 item1 。
如何设置两个选择框的选中值？例如，我为选择器 1 和 item3 设置了 item3: test2 为选择器 2 但如果我刷新页面它不正确。

【解决方案2】：

您可以在 html5 中使用 data-tag 并使用以下代码执行此操作：

<script>
	$('#mainCat').on('change', function() {
		var selected = $(this).val();
		$("#expertCat option").each(function(item){
			console.log(selected) ;  
			var element =  $(this) ; 
			console.log(element.data("tag")) ; 
			if (element.data("tag") != selected){
				element.hide() ; 
			}else{
				element.show();
			}
		}) ; 
		
		$("#expertCat").val($("#expertCat option:visible:first").val());
		
});
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<select id="mainCat">
			<option value = '1'>navid</option>
			<option value = '2'>javad</option>
			<option value = '3'>mamal</option>
		</select>
		
		<select id="expertCat">
			<option  value = '1' data-tag='2'>UI</option>
			<option  value = '2' data-tag='2'>Java Android</option>
			<option  value = '3' data-tag='1'>Web</option>
			<option  value = '3' data-tag='1'>Server</option>
			<option  value = '3' data-tag='3'>Back End</option>
			<option  value = '3' data-tag='3'>.net</option>
		</select>

【讨论】：

这看起来像是要走的路，如果它是正确的，我会给你一个赞成票，但仅供参考，代码 sn-p 不起作用。
它可以工作，但是在第一次运行组合框时，如果您更改第一个组合框的值，则不会引发 onchange 事件，这可以正常工作....这是通过选择 ..... 来更改值的示例在现实世界中，您最常重构此代码以使其像魅力一样工作:)

【解决方案3】：

您可以像这样使用开关盒：

$(document).ready(function () {
  $("#type").change(function () {
     switch($(this).val()) {
        case 'item1':
            $("#size").html("<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>");
            break;
        case 'item2':
            $("#size").html("<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>");
            break;
        case 'item3':
            $("#size").html("<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>");
            break;
        default:
            $("#size").html("<option value=''>--select one--</option>");
     }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="type">
    <option value="item0">--Select an Item--</option>
    <option value="item1">item1</option>
    <option value="item2">item2</option>
    <option value="item3">item3</option>
</select>

<select id="size">
    <option value="">-- select one -- </option>
</select>

【讨论】：

【解决方案4】：

这是我使用 Jquery 过滤器的简单解决方案。

$('#publisher').on('change', function(e) {
   let selector = $(this).val();
   $("#site > option").hide();
   $("#site > option").filter(function(){return $(this).data('pub') == selector}).show();
});

JSFIDDLE

【讨论】：

请注意，这在 IE 中不起作用—— display:none 不会在 IE 中隐藏该选项。我使用了您的答案，但必须添加几行才能使其在 IE stackoverflow.com/questions/20373558/… 中工作

【解决方案5】：

作为@Navid_pdp11 的补充答案，它可以选择第一个可见项目并处理文档加载。将以下内容放在您的身体标签下方

<script>
$('#mainCat').on('change', function() {
    let selected = $(this).val();
    $("#expertCat option").each(function(){
        let element =  $(this) ;
        if (element.data("tag") != selected){
            element.removeClass('visible');
            element.addClass('hidden');
            element.hide() ;
        }else{
            element.removeClass('hidden');
            element.addClass('visible');
            element.show();
        }
    });
    let expertCat = $('#expertCat');
    expertCat.prop('selectedIndex',expertCat.find("option.visible:eq(0)").index());
}).triggerHandler('change');
</script>

【讨论】：

【解决方案6】：

您的 if 语句正在设置值。你想通过这样做来比较它

if ($("#type").val() == "item1") {
 ...
}

daLizard 是对的。你想要一个事件处理程序。当页面 DOM 准备好使用时，document.ready 只运行一次。

【讨论】：

【解决方案7】：

我不明白你想要实现什么，但你需要一个事件监听器。比如：

$('#type').change(function() {
   alert('Value changed to ' + $(this).attr('value'));
});

这将为您提供所选选项标签的值。

【讨论】：

你可能想在处理程序中使用 $(this).val()。

【解决方案8】：

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form name="index">
<select name="in" onchange="myFunction()">
<option>Select One</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<select id="select">
<option>Select One</option>
</select>
</form>
</body>
</html>
<script>
function myFunction(){
var x=document.index.in.value;
if(x=="One"){
document.getElementById('select').innerHTML="<option>A</option><option>Two</option>";
}
}
</script>

【讨论】：

【解决方案9】：

function showDiv(prefix, chooser) {
  var selectedOption = (chooser.options[chooser.selectedIndex].value);
  if (selectedOption == "2") {
    var div = document.getElementById(prefix + "2");
    div.style.display = 'block';
  } else {
    var div = document.getElementById(prefix + "2");
    div.style.display = 'None';
  }
}

<div class="form-label-group">
  <select name="name" id="cboOptions" onchange="showDiv('div',this)" class="form-control">
    <option value="">How can we help you?</option>
    <option value="2">Support</option>
    <option value="1">Feedback</option>
  </select>
  <div id="div2" style="display:none;">
    <select id="type">
      <option value="item0">--Select--</option>
      <option value="item1">Technical</option>
      <option value="item2">Non-Technical</option>
    </select>
  </div>

</div>

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。