使用Javascript開發Javascript選擇菜單

Question

我正在創建一個我希望具有特定功能的表單。

該表格要求提出其具有多個這樣的值的選擇菜單：

• 整數
• 字符串
• 雙
• 其他...

現在，當用戶選擇「Other ..」值時，我希望輸入框出現在用戶可以輸入值的類型的位置。

我將如何去隱藏和顯示錶單元素取決於是否從選擇菜單中選擇了特定選項？

我正在使用JQuery，如果這可以幫助。

感謝您的任何意見。

Answer 1

首先給選擇菜單的HTML元素一個id。例如：

<select id="type" ... 

然後添加下面的JavaScript代碼

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#type").change(function(){ 
      if ($("#type").val()=="Other...") 
       $("#type").after($("<input type='text' name='other' id='other'/>")); 
      else 
       $("#other").remove(); 
     } 
    } 
</script> 

Answer 2

退房這個JS撥弄它可能會顯示你想要什麼：http://jsfiddle.net/teQyY/

<select id="selChoice"> 
    <option>Integer</option> 
    <option>String</option> 
    <option>Double</option> 
</select> 
<div id="divDouble"> 
    Please enter your Double: <input/> 
</div> 
<div id="divInteger"> 
    Please enter your Integer: <input/> 
</div> 
<div id="divString"> 
    Please enter your String: <input/> 
</div> 

$("#divDouble").toggle(false); 
$("#divInteger").toggle(false); 
    $("#divString").toggle(false); 
$("#selChoice").change(function(){ 
    if($(this).val() == "Integer") 
    { 
     $("#divDouble").toggle(); 
    } 
    else if($(this).val() == "String") 
    { 
     $("#divString").toggle(); 
    } 
    else if($(this).val() == "Integer") 
    { 
     $("#divString").toggle(); 
    } 
}); 

Answer 3

$('select').change(function() { 
    if ($('option:selected', this).val() == 'Other...') { 
     $('input#hidden').show(); // hidden would be the id of the input text element you want to show and hide 
    } else { 
     $('input#hidden').hide(); 
    } 
} 

Answer 4

一種你撥弄：http://jsfiddle.net/uE3KW/

基本上，您想要將函數綁定到change事件<select>。在該功能中，您可以檢查$(this).val()的值以查看選擇了哪個選項。然後，您可以使用.hide()和.show()來控制輸入框的可見性。

Answer 5

在包含輸入選擇變化展出面積

$("select").change(function() { 

      $("select option:selected").each(function() { 
       var AreaToShow = $('#otherinput') 
      if($(this).text()) =='other') 
       { 
        AreaToShow.show(); 
       } 
       else 
       { 
        AreaToShow.hide(); 
       }); 
}); 

其中HTML類似

<select > 
<option> etc... 

<p id="AreaToShow"><label for='inputname'><input etc .... 

Answer 6

我使用visibility:hidden隱藏輸入字段，但display:none也是一種選擇。

當選擇「其他」時會顯示輸入欄，如果更改則隱藏。

演示：http://jsfiddle.net/wdm954/nZNrE/

$('#a').change(function() { 
    if ($(this).val() == 'other') $('.other').css('visibility', 'visible'); 
    else $('.other').css('visibility', 'hidden'); 
}); 

Answer 7

使用此代碼選擇的菜單項目的設計。

http://commixturesoft.com/js/jquery-1.8.0.min.js

 <script type="text/javascript"> 

      $(function()  { 

      var menu_ul = $('.menu > li > ul'), 

      menu_a = $('.menu > li '); 

      menu_a.click(function (e) { 


      if (!$(this).hasClass('current')) { 

      menu_a.removeClass('current'); 
      $(this).addClass('current'); 
      } 

      else { 
      $(this).removeClass('current'); 

     } 
    }); 

}); 
</script> 

<ul class="menu"> 


<li class="subnav-follower current"> 
    <a href="#">Time</a> 

</li> 


<li class="subnav-follower"> 
    <a href="#">Files</a> 
</li> 



<li class="subnav-follower" > 
    <a href="#">Tools</a> 
</li> 


<li class="subnav-follower"> 
    <a href="#">Fields</a> 
</li>