Question

这是我的HTML代码：

<select name="plot_no" id="plot_no" class="dropdown validate_B" >
          <option value="">Select no. of Plots to book</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
 </select>
        <img src="./images/rightmarked.gif" title=" mandetory"> </div>
      <div class="marginbtm5">

          <div id="divplot1" style="display:block;">
            <select name="plot_no1" id="plot_no1" >
              <option value="">Plot No.</option>
            </select>
          </div>
          <div id="divplot2" style="display:none;">
            <select name="plot_no2" id="plot_no2" >
              <option value="">Plot No.</option>
            </select>
          </div>
          <div id="divplot3" style="display:none; ">
            <select name="plot_no3" id="plot_no3" >
              <option value="">Plot No.</option>
            </select>
          </div>
          <div id="divplot4" style="display:none;">
            <select name="plot_no4" id="plot_no4" >
              <option value="">Plot No.</option>
            </select>
          </div>

这是我的javascript

$("#plot_no").change(function(e)
{
    var id=$(this).val();

    if (id==2){
        document.getElementById("divplot2").style.display="";
    } else {
        document.getElementById("divplot2").style.display="none";    
    }


    if (id==3){
        document.getElementById("divplot2").style.display="";
        document.getElementById("divplot3").style.display="";   
    } else {
        document.getElementById("divplot2").style.display="none"; 
        document.getElementById("divplot3").style.display="none";    
    }
    if (id==4){
        document.getElementById("divplot2").style.display="";
        document.getElementById("divplot3").style.display="";
        document.getElementById("divplot4").style.display="";   
   } else {
        document.getElementById("divplot2").style.display="none"; 
        document.getElementById("divplot3").style.display="none";  
        document.getElementById("divplot4").style.display="none";  
   }

});

我想显示1个下拉列表，如果用户从上面的下拉菜单中选择1，如果用户从下面选择2下拉菜单，则显示2个下拉菜单。所以有人可以告诉我这个吗？

Answer 1

试试这个小提琴。为选择框添加了一个类plotno，

Fiddle

Answer 2

选中 Demo

$("#plot_no").change(function(e)
{
    var id=$(this).val();
    console.log(id);
    if (id =='2'){
        $('#divplot2').show();
    }
    if (id=='3'){
        $('#divplot2,#divplot3').show();
    }
    if (id=='4'){
        $('#divplot2,#divplot3,#divplot4').show();
    }

});

if (id==2){}无效。 .val()返回一个字符串。

根据选择下拉值填充文本框

2 个答案: