Jquery动态更新select中的“other”选项

我正在开发一个项目，它将使用大量选择菜单输入各种数据。 我想直接在select中包含一个’other’选项，它将触发一个简单的对话框，并允许用户输入一个自定义值（如果适用），类似于以下javascript代码：

 function chkother(fld,len,idx) { if ((idx+1)==len) { other=prompt("Please indicate 'other' value:"); fld.options[idx].value=other; fld.options[idx].text=other; } }  

适用于选择：

   yes no other  

并显示一个提示，它将使用用户文本更新选项。

我想使用jquery做类似的事情，所以我可以看看扩展function和学习一些jquery，但是我很难开始。

Answer 1

这将帮助您入门。 这将为页面上的任何选择添加function，将新值附加到选择（并在发生错误时保留其他值）。

 $(function() { $('select').change( function() { var value = $(this).val(); if (!value || value == '') { var other = prompt( "Please indicate other value:" ); if (!other) return false; $(this).append('' + other + ''); } }); }); 

Answer 2

我实际上解决了一个与此非常相似的问题，并最终编写了一个jQuery插件（ jQuery.otherDropdown ）来收集选择下拉列表的“其他”响应。 它在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 = $('' + value + ''); $('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  * @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 = $(''); // 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 = $('' + value + ''); $this.append($option); } // Focus the value $this.val( value ); }); };