JavaScript Выбрать Меню С Javascript

Question

Я создаю форму, которую я хотел бы иметь очень специфическую функциональность.

Форма просит представить меню выбора, которое имеет ряд значений, таких как:

• Integer
• Строка
• Double
• Другое ...

Теперь, когда пользователь выбирает значение «Other ..», я хотел бы, чтобы появилось поле ввода, где пользователь может ввести тип значения.

Как мне скрыть и показать элементы формы в зависимости от того, был ли выбран конкретный выбор в меню выбора?

Я использую JQuery, если это может помочь.

Спасибо за любой вклад.

Answer 1

$('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 2

Используйте этот код для оформления выбранного элемента меню.

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>

Answer 3

Я использую 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 4

При выборе изменить область показа, содержащую ввод

$("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 5

скрипка для вас: http://jsfiddle.net/uE3KW/

По сути, вы хотите связать функцию с событием change <select>. В функции вы можете проверить значение $(this).val(), чтобы увидеть, какая опция была выбрана. Затем вы можете использовать .hide() и .show() для управления видимостью вашего поля ввода.

Answer 6

Проверьте этот JS Fiddle, он может показать, что вы хотите: 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 7

Сначала присвойте HTML-элементу меню выбора идентификатор.Например:

<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>