Question

我需要根据“下拉列表type_w”中的选择向我显示“ lmg或标记的下拉列表”。

我尝试过addEventListener ("")，但对我来说不起作用。

我也将CSS与"display: none" / "display: block"一起使用，将JavaScript与switch / case一起使用，但这是行不通的。

</select>
 <select id="type_w">
   <option value="null" selected> --- </option>
   <option value="lmg"> LMG </option>
   <option value="marks"> Marksman Rifle </option>
 </select>

 <select id="w_lmg" hidden>
   <option value="null" selected> --- </option>
   <option value="mg5"> MG5 </option>
 </select>

 <select id="w_marks" hidden>
   <option value="null" selected> --- </option>
   <option value="mk17"> MK17 Military </option>
 </select>
</form>
</div>

Answer 1

我只写了一个小的jQuery代码，希望对您有所帮助。谢谢

$(document).ready(function() {
  $('#type_w').change(function() {
    $(".hide-submenu").hide();
    $("#w_" + this.value).show();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="type_w">
  <option value="null" selected> --- </option>
  <option value="lmg"> LMG </option>
  <option value="marks"> Marksman Rifle </option>
</select>

<select id="w_lmg" class="hide-submenu" hidden>
  <option value="null" selected> --- </option>
  <option value="mg5"> MG5 </option>
</select>

<select id="w_marks" class="hide-submenu" hidden>
  <option value="null" selected> --- </option>
  <option value="mk17"> MK17 Military </option>
</select>

Answer 2

没有jQuery：

document.addEventListener('DOMContentLoaded', function() {

	document.querySelector('#type_w').addEventListener("change", function (e) {

		document.querySelector('#w_lmg').classList.add('hidden');
		document.querySelector('#w_marks').classList.add('hidden');

		if(e.target.selectedIndex == 1) {
			document.querySelector('#w_lmg').classList.remove('hidden');
		}

		if(e.target.selectedIndex == 2) {
			document.querySelector('#w_marks').classList.remove('hidden');
		}

	});

});

.hidden {
	display:none;
}

<select id="type_w">
	<option value="null" selected> --- </option>
	<option value="lmg"> LMG </option>
	<option value="marks"> Marksman Rifle </option>
</select>

<select id="w_lmg" class="hidden">
	<option value="null" selected> --- </option>
	<option value="mg5"> MG5 </option>
</select>

<select id="w_marks" class="hidden">
	<option value="null" selected> --- </option>
	<option value="mk17"> MK17 Military </option>
</select>

Answer 3

好的，我将提供实现此功能所需的代码，但是我应该说有很多方法可以做到这一点。没有完整的上下文范围和理想的最终结果，很难说这绝对是做到这一点的方法。

除了一个关键元素，我不会要求您更改HTML，请删除“隐藏”属性。如果要隐藏/显示HTML元素，请使用CSS作为第一个调用点。

free()

正如我说的那样，您将需要在HTML中删除“ hidden”属性，以使上述内容生效。您可以使用.hidden，但在这里使用CSS是（imo）更好的解决方案。

如果您想知道如何将两个次要选择项设置为通过CSS隐藏，则可以使用以下方法：

<script>

// run script once once the page has loaded
document.addEventListener("DOMContentLoaded", function(event) {init()});

// this will apply the event handler to the primary select
function init() {
 // apply even handler to detect when primary select has changed
 document.querySelector("#type_w").addEventListener("change", function(ev){
  var selects = document.querySelectorAll("#w_lmg, #w_marks").forEach( 
   function(item){ 
    item.style.display = ("w_"+ev.currentTarget.value==item.id ? "inline" : "none") 
   }
  )
 });
}

</script>

或者，如果您希望使用JS解决方案，请将以下代码作为init（）函数的第一行插入：

<style>
 #w_lmg, #w_marks { display: none }
</style>

根据第一个下拉菜单中的选择显示第二个下拉菜单？

3 个答案: