如果选择了选择标记选项，则显示另一个选择标记

Question

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

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

如果选择了选项值3，则应填充另一个选择，如

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

如果没有选择值3则没有任何反应。

Answer 1

您可以通过隐藏和显示其他select来执行此操作，具体取决于所选的值（除非您希望在单击选项3后动态填充结果，在这种情况下您必须更具体）< / p>

<强> 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();
}

});