发表新帖
发表新帖

jQuery Show a Textbox When an Option is Selected

前端 未结
关注
4 1789
暖寄归人
暖寄归人 2021-02-06 10:33

I have the following code:
提交评论
  •  加载中...
  • 半阙折子戏
    2021-02-06 10:46 
    <select id = "ddlPassport" onchange = "ShowHideDiv()" style="width:150px;">
<option value="Y">Type 1</option>
<option value="Y">Type 2</option>
<option value="N">Type 3</option>
<option value="D">Other</option>
</select>


<script type="text/javascript">
    function ShowHideDiv() 
    {
    var ddlPassport = document.getElementById("ddlPassport");
    var dvPassport = document.getElementById("dvPassport");
    dvPassport.style.display = ddlPassport.value == "Y" ? "block" : "none";
    dvPassport1.style.display = ddlPassport.value == "N" ? "block" : "none";
    dvPassport2.style.display = ddlPassport.value == "D" ? "block" : "none";

    }



 <div id="dvPassport" style="display: none">
          <form action="viewdata.php" method="POST">
        Enter Data:
        <input type="text" id="txtPassportNumber" name="data" />
        <br>
        <input type="submit" value="Search" name="submit" 
     style="float:right;width:150px;margin-top:10px;">
    </form>
    </div>
    <div id="dvPassport1" style="display: none">
        <form action="viewdata.php" method="POST">
        Enter Data:
        <input type="number" id="txtPassportNumber" name="data"  />
         <br>
        <input type="submit" value="Search" name="submit" 
   style="float:right;width:150px;margin-top:10px;">
    </form>
    </div>
    <div id="dvPassport2" style="display: none">
        <form action="viewdata.php" method="POST">
        Enter Data:
        <input type="date" id="txtPassportNumber" name="data"  />
         <br>
        <input type="submit" value="Search" name="submit" 
       style="float:right;width:150px;margin-top:10px;">
    </form>
    </div>
    0 讨论(0)
  • 你的背包
    2021-02-06 10:48

    Try this:

    <select id="selectbox_id">
<option value="Type 1">Type 1</option>
<option value="Type 2">Type 2</option>
<option value="Type 3">Type 3</option>
<option value="Other">Other</option>
</select>

<input type="text" id="other" />

    JQuery:

    $(function(){
  // hide by default
  $('other').css('display', 'none');

  $('selectbox_id').change(function(){
   if ($(this).val() === 'Other') {
     $('other').css('display', 'block');
   }
 });
});
    0 讨论(0)
  • -上瘾入骨i
    2021-02-06 10:52

    No need for any css here.

    $('#sel').change(function() {
    var selected = $(this).val();
    if(selected == 'Other'){
      $('#other').show();
    }
    else{
      $('#other').hide();
    }
});
    0 讨论(0)
    •  看不清?
    提交回复
    热议问题