如果 Select 标签选项被 selected 显示另一个 select 标签

Question

我需要这样的 js 或 jquery 或 php 代码。

<select id="1">
<option value="1">....</option>
<option value="2">....</option>
<option value="3">....</option> 
</select>

如果选项值 3 是 selected，它应该填充另一个 select，例如

<select id="2">
-
-
</select>

如果不是值 3 selected 什么都不会发生。

Answer 1

您可以通过根据所选值隐藏和显示另一个 select 来实现此目的（除非您想在单击选项 3 后动态填充结果，在这种情况下您必须更具体)

HTML

<select id="select1">
  <option>Choose One</option>
  <option value="1">Val 1</option>
  <option value="2">Val 2</option> 
  <option value="3">Val 3</option> 
</select>

<select id="select2">
  <option>Choose Two</option>
  <option value="1">Val 1</option>
  <option value="2">Val 2</option>
  <option value="3">Val 3</option> 
</select>

CSS

#select2{
   display: none;
}

JS

$("#select1").change(function(){
    if($(this).val() == 3){
      $("#select2").show();
    }else{
      $("#select2").hide();
    }

});

FIDDLE

Answer 2

使用这个

Html

<select id="1">
<option value="1">....</option>
<option value="2">....</option>
<option value="3">....</option> 
</select>

<select id="2" style="display:none;">
<option value="1">....</option>
<option value="2">....</option>
<option value="3">....</option> 
</select>

你的 Jquery 这里

$("#1").change(function(){
    if($(this).val() == 3){
      $("#2").show();
    }else{
      $("#2").hide();
    }

});

Answer 3

这是一个纯粹的Javascript解决方案

看到这个fiddle

Javascript

function myFunction() {
    var x = document.getElementById("id1").value;
    if (x == "3") document.getElementById("id2").style.display = "block";
}

HTML

<select id="id1" onchange="myFunction()">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<select id="id2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

CSS

#id2 {
    display:none;
}

Answer 4

试试这个..

<select id="1" class="first">
<option value="1">....</option>
<option value="2">....</option>
<option value="3">....</option> 
</select>

<select id="2" style="display:none;">
<option value="1">....</option>
<option value="2">....</option>
<option value="3">....</option> 
</select>

$(".first").change(function(){
var selectvalue=$(".first").val();
if(selectvalue==3)
{
$("#2").show();
} else {

$("#2").hide();
}

});

如果 Select 标签选项被 selected 显示另一个 select 标签

If Select tag option is selected shows another select tag

html

javascript

php

jquery

select

这是一个纯粹的Javascript解决方案