【问题标题】:jquery: populate dropdown based on text-box valuejquery:根据文本框值填充下拉列表
【发布时间】:2015-10-30 00:22:08
【问题描述】:

我正在尝试根据页面加载和文本更改时文本框中的输入来填充下拉框。我可以使用下面的代码在页面加载时填充我的下拉列表。现在,当我向文本框添加新文本时,我希望将新文本附加到下拉列表中,或者如果我编辑任何现有文本,则应该更新列表。我该怎么做?

这是我的代码。

(function($) {

$(document).ready(function() {

    $("[id^=id_fields-][id$=_options_0]").load('change',function() {
        init = this.id.match(/id_fields-\d+/);
        choices = $(this).val().split("\n");
        $.each(choices, function(val, text){
             $('[id^='+init+'][id$=-choice_text]').append( new Option(text));               
        });
    });
 });
});

【问题讨论】:

  • "....load('change'..."?!另请注意,您不仅实际上没有运行上述函数中的代码,而且因为您已将其设为匿名函数并且未保存对它的引用,因此您无法完全运行该代码。
  • .on('change', functions()... 将触发函数 on change 值由您的选择器确定的元素。
  • 这段代码运行良好。它在运行时填充下拉列表。但是,如果我将 '.load('change',function()...' 更改为 '.change(function()...' 这仅在我对文本框进行任何更改时才有效。但这会产生一个单独的问题。
  • 由于一个有趣的巧合,您的代码仅在加载时运行。
  • 能否详细说明?

标签: javascript jquery


【解决方案1】:

这可能有效。

var myFunction = function() {
    init = this.id.match(/id_fields-\d+/);
    choices = $(this).val().split("\n");
    $.each(choices, function(val, text){
         $('[id^='+init+'][id$=-choice_text]').append( new Option(text));               
     });
};

$(document).ready(function() {
    myFunction.call($("[id^=id_fields-][id$=_options_0]"));    
    $("[id^=id_fields-][id$=_options_0]").on('change',myFunction);
 });

【讨论】:

  • 感谢您的回复,但这不起作用。 myfunction 没有得到对象。
猜你喜欢
  • 1970-01-01
  • 2023-03-18
  • 2019-09-17
  • 2012-10-31
  • 1970-01-01
  • 2019-07-28
  • 1970-01-01
  • 2014-05-24
  • 1970-01-01
相关资源
最近更新 更多