Javascript jQuery在选择'；其他'；从下拉列表？

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

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

有人能帮忙吗

下面是我用来连接国家和州/省下拉列表的jQuery插件：

---

您应该有一个单独的Div：

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

---

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

您应该有一个单独的Div:

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

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

$（文档）.ready（函数（）
{
$（“#ddlSelect”）.change（函数（）
{                                   
$（“#divTxtGroup”）.empty（）；
var selectedVal=this.value；
如果（selectedVal==“其他”）{
var newTextBoxDiv1=$（document.createElement（'div'））.attr（“id”，“divOther”）；
newTextBoxDiv1.after（）.html（“”）；
newTextBoxDiv1.appendTo（“divTxtGroup”）；
}
});
});
国家
-----挑选-----
美国
加拿大
其他

$（文档）.ready（函数（）
{
$（“#ddlSelect”）.change（函数（）
{                                   
$（“#divTxtGroup”）.empty（）；
var selectedVal=this.value；
如果（selectedVal==“其他”）{
var newTextBoxDiv1=$（document.createElement（'div'））.attr（“id”，“divOther”）；
newTextBoxDiv1.after（）.html（“”）；
newTextBoxDiv1.appendTo（“divTxtGroup”）；
}
});
});
国家
-----挑选-----
美国
加拿大
其他

我实际上解决了一个与此非常类似的问题，并最终编写了一个jQuery插件（）来为select下拉列表收集“other”响应。它是开着的。我将分解我的方法，以便您可以按照自己的方式实现它

在我看来，这个想法是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=$（''+value+''）；
$（'select'）。追加（$option）；
$（'select'）.val（值）；

例子 所有这些想法都包含在这个插件中，这可能是一个很好的例子，您可以根据需要使用和重用它。你可以看到它在工作

/**
*@name jquery.otherdropdown
*@description在下拉列表中选择“其他”选项时支持文本区域的小型jQuery插件
*@version 1.0.2
*@作者乔纳森·斯塔森
*@见https://github.com/TheBox193/jquery.otherdropdown
*/
$.fn.otherDropdown=函数（选项）{
var$this=这个；
//允许触发其他名称/值，默认为“其他”
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；
//绑定到所有更改事件
$this.change（功能（ev）{
//如果选择了“其他”选项，则在文本区域进行交换
if（this.value==opts.name_lower | | this.value===opts.name_upper）{
$this.hide（）.after（$textInput）；
$textInput.focus（）；
}
});
//准备文本输入
变量$textInput=$（''）；
//允许在文本输入上使用自定义类
如果（选择类）{
$textInput.addClass（选项类）；
}
//绑定到模糊以切换回选择下拉列表
$textInput.blur（函数（ev）{
var值=此值；
这个值=“”；
这个。删除（）；
$this.show（）；
如果（值==''| |值===opts.name_下| |值===opts.name_上）{
返回；
}
//如果键入了某个内容，请使用该值创建一个新选项
var$searchedOption=$this.children（'[value=“'+value+'“]'）；
//如果值不存在，则添加它。
如果（$searchedOption.length<1）{
变量$option=$（''+value+''）；
$this.append（$option）；
}
//关注价值
$this.val（值）；
});
};

我实际上解决了一个与此非常类似的问题，并最终编写了一个jQuery插件（）来为select下拉列表收集“other”响应。它是开着的。我将分解我的方法，以便您可以按照自己的方式实现它

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

基本组成部分 当您的“其他”选项被选中时，请仔细倾听 在选择输入上添加

.change（）

事件绑定

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

倾听用户的输入 如果你选择一个te

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

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