从下拉列表中选择'other‘时自动创建文本框的jQuery？

Question

我有一个满是国家的列表。当他们选择加拿大或美国时，一个单独的下拉列表将自动填充州/省。如果他们选择任何其他国家/地区，第二个下拉列表将填充" other“，其值为空值。

我的问题是，如果他们选择了另一个国家，并且第二个下拉菜单中填充了"Other"，我如何在第二个下拉菜单下自动显示一个文本框，并将其动态绑定到"Other“值。换句话说，" other“的值会随着文本框的输入而动态填充。因此，当表单提交时，第二个下拉列表的值将与他们在文本框中键入的内容一起发布。

有人能帮上忙吗？

下面是我用来连接国家和州/省下拉列表的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;
        }
      });
    }
  });

Answer 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());
});

我还没有测试过这段代码，所以你可能需要调整它。

Answer 2

http://jsbin.com/uviyo4/4/edit

Answer 3

我实际上解决了一个与此非常相似的问题，并最终编写了一个jQuery插件(jQuery.otherDropdown)来收集select下拉菜单的“other”响应。它在GitHub和npm上。我将分解我的方法，以便您可以按照自己的方式实现它。

在我看来，这个想法是jQuery的一个完美用例。

基本组件

监听您的“其他”选项何时被选择

在select输入上添加一个.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);

示例

所有这些想法都封装在这个插件中，可能是一个很好的例子，你可以尝试和重用你所需要的工作方式。你可以看到它是如何工作的here

/**
 * @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 );
    });
};