Блог

Главная - Вопросы по программированию - jQuery для автоматического создания текстового поля при выборе «другое» из выпадающего списка?

jQuery для автоматического создания текстового поля при выборе «другое» из выпадающего списка?

#javascript #jquery #forms

#javascript #jquery #формы

Вопрос:

У меня есть выпадающий список, полный стран. Когда они выбирают Канаду или США, тогда отдельный выпадающий список автоматически заполняется штатами / провинциями. Если они выбирают любую другую страну, второй выпадающий список заполняется «Другое» с пустым значением.

Мой вопрос в том, что если они выберут другую страну и во 2-м выпадающем списке будет указано «Другое», как я могу автоматически отобразить текстовое поле во 2-м выпадающем списке и динамически привязать его к значению «Другое». Другими словами, значение «Другое» динамически заполняется значением текстового поля по мере ввода. Таким образом, когда форма отправлена, значение 2-го выпадающего списка публикуется вместе с тем, что они ввели в текстовое поле.

Кто-нибудь может помочь?

Вот плагин jQuery, который я использую для привязки выпадающих списков «страна» и «штат / провинция»: https://github.com/adam12/jquery-state-select 

 <html>
  <head>
    <title>jQuery State Select Plugin Test</title>
    <script type="text/javascript" src="jquery-latest.pack.js"></script>
    <script type="text/javascript" src="jquery.selectboxes.pack.js"></script>
    <script type="text/javascript" src="jquery.stateselect.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
      $('#country').linkToStates('#province');
    });
    </script>
  </head>
  <body>
    <form>
      <p>
        <label>Province/State</label><br />
        <select name="province" id="province">
          <option value="">Please select a country</option>
        </select>
      </p>
      <p>
        <label>Country</label><br />
        <select name="country" id="country">
          <option>Please select</option>
          <option value="Canada">Canada</option>
          <option value="United States">United States</option>
        </select>
      </p>
    </form>
  </body>

Частичный код плагина:

  $.fn.extend({
        linkToStates: function(state_select_id) {
      $(this).change(function() {
        var country = $(this).attr('value');
        $(state_select_id).removeOption(/.*/);
        switch (country) {
          case 'Canada':
            $(state_select_id).addOption(canadian_provinces, false);
            break;
          case 'United States':
            $(state_select_id).addOption(us_states, false);
            break;
          default:
            $(state_select_id).addOption({ '' : 'Other'}, false);
            break;
        }
      });
    }
  });

Комментарии:

1. Я предлагаю вам опубликовать некоторый код.

Ответ №1:

У вас должен быть отдельный Div:

 <div id="hiddendiv">
    <input type="text" id="othertextbox" />
</div>

Затем:

 $(window).load(function()
{
    $("#hiddendiv").hide();
});

$("#ComboBox").change(function()
{
    if($("#ComboBox option:selected").text() == "Other")
    {
        $("#hiddendiv").show();
    }
});

$("#othertextbox").change(function()
{
    $("#ComboBox").val($("#othertextbox").text());
});

Я не тестировал этот код, поэтому вам, возможно, потребуется его настроить.

Комментарии:

1. Но как бы введенное значение из #othertextbox автоматически заполняло $ («опция #ComboBox: выбрано»).val()?

2. это не работает, потому что оно пытается выбрать значение, которого там нет. Параметр «Другое» имеет пустое значение. Как я могу заполнить это значение? Кстати, я пробовал $ («#othertextbox»).val(), но безуспешно.

3. Жужжание…. Если это не сработает, я не думаю, что это возможно… На странице, на которую отправляются данные, вы могли бы проверить, установлено ли в поле со списком значение «другое», и если это так, получить значение из текстового поля.

4. Отлично, получилось. Спасибо TheAdamGaskins за всю помощь! $(«#ComboBox»).find(«:selected»).val($(this).val());

Ответ №2:

Ответ №3:

На самом деле я решил проблему, очень похожую на эту, и в итоге написал плагин jQuery (jQuery.otherDropdown) для сбора ответа «другое» для выпадающего списка выбора. Это на GitHub и npm. Я разберу свой подход, чтобы вы могли реализовать его по-своему.

На мой взгляд, эта идея является идеальным вариантом использования jQuery.

Основные компоненты

Прислушайтесь, когда будут выбраны ваши «другие» параметры

Добавьте .change() привязку события к выбранному вводу.

 $('select').change( function() {
    if(this.value === 'other') {
        // Your logic here to for when/how to prompt for user input
    }
});

Прослушивайте вводимые пользователем данные

Если вы выберете текстовый ввод вместо приглашения (что может улучшить пользовательский интерфейс), прослушайте событие размытия

 // listen to a text area
$('input').blur( function() {
    if(this.value !== '') {
        // Logic to add the new option to the select
    }
});

// or bring up a prompt dialog
var value=prompt("Please indicate 'other' value:");
if(this.value !== '') {
    // Logic to add the new option to the select
}

Добавьте новую опцию

Независимо от того, как вы решите запросить у пользователя значение, добавить его так же просто, как создать элемент с помощью jQuery и добавить его. Наконец, вы, вероятно, захотите сфокусировать значение, что можно сделать с помощью .val() 

 var $option = $('<option value="'   value   '">'   value   '</option>');
$('select').append($option);
$('select').val(value);

Пример

Все эти идеи воплощены в этом плагине и могут быть хорошим примером, с которым вы можете поиграть и повторно использовать, чтобы работать так, как вам нужно. Вы можете увидеть, как это работает здесь

 /**
 * @name jquery.otherdropdown
 * @description A small jQuery plugin to support a text area when selecting an 'Other' option in a dropdown
 * @version 1.0.2
 * @author Jonathan Stassen <jstassen.com>
 * @see https://github.com/TheBox193/jquery.otherdropdown
 */
$.fn.otherDropdown = function(options) {
    var $this = this;
    // Allow a different name/value to trigger, default to 'other'
    var opts = $.extend({}, {value: 'other'}, options);
    opts.name_lower = opts.value.toLowerCase();
    opts.name_upper = opts.value.charAt(0).toUpperCase()   opts.value.slice(1);
    opts.placeholder = opts.placeholder || opts.name_upper;

    // Bind to all change events
    $this.change( function(ev){

        // Swap in the text area if our 'other' option was chosen
        if (this.value === opts.name_lower || this.value === opts.name_upper) {
            $this.hide().after( $textInput );
            $textInput.focus();
        }
    });

    // Prepare our text input
    var $textInput = $('<input type="text" class="otherdropdown" placeholder="'   opts.placeholder   '" />');

    // Allow custom classes on the text input
    if (opts.classes) {
        $textInput.addClass(opts.classes);
    }

    // Bind to blur to swap back to select dropdown
    $textInput.blur( function(ev) {
        var value = this.value;
        this.value = '';
        this.remove();
        $this.show();

        if (value === '' || value === opts.name_lower || value === opts.name_upper) {
            return;
        }

        // If something was typed, create a new option with that value
        var $searchedOption = $this.children('[value="'   value   '"]');

        // If value doesn't exist, added it.
        if ( $searchedOption.length < 1 ) {
            var $option = $('<option value="'   value   '">'   value   '</option>');
            $this.append($option);
        }

        // Focus the value
        $this.val( value );
    });
};

Ответ №4:

 <html>
    <head>
         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function ()
        {
            $("#ddlSelect").change(function ()
            {                                   
                $("#divTxtGroup").empty();             
                var selectedVal = this.value;
                if (selectedVal == "Other") {
                        var newTextBoxDiv1 = $(document.createElement('div')).attr("id", 'divOther');
                        newTextBoxDiv1.after().html('<input type="text" id="txtOther">');
                        newTextBoxDiv1.appendTo("#divTxtGroup");                        
                }
            });
        });
    </script>
    </head>
    <body>
         Countries
         <select id="ddlSelect" name="ddlSelect">
         <option value="-----Select-----">-----Select-----</option>
         <option value="US">US</option>
         <option value="Canada">Canada</option>
         <option value="Other">Other</option>
         </select>
         <div id='divTxtGroup'></div>
    </body>
</html>