jQuery val() 在带有 Aloha 编辑器的动态 <select> 上无法正常工作答案

【问题标题】：jQuery val() not working properly on dynamic <select> with Aloha EditorjQuery val() 在带有 Aloha 编辑器的动态 <select> 上无法正常工作
【发布时间】：2014-04-23 15:04:50
【问题描述】：

我正在通过 jQuery append() 函数创建一个动态的 <select> 元素，但我似乎无法获得正确的选择值。我总是得到第一个选项，即 1。我正在尝试配置 Aloha 编辑器，这可能与问题有关。

这是附加在侧边栏中的选择元素。

$('.aloha-sidebar-inner').append('<select id="columns"><option value="1">1 Column</option><option value="2">2 Columns</option><option value="3">3 Columns</option><option value="4">4 Columns</option></select>').trigger('create');

如前所述，我使用 Aloha 编辑器，所以 jquery 看起来像这样：

    Aloha.ready(function() {
          $('.aloha-sidebar-inner').append('<button id="add-section" class="btn aloha-sidebar-btn sidebar-item" type="button" onclick="addSection(document.getElementById(\'articles\').value);">Add Section</button>');
          $('.aloha-sidebar-inner').append('<p>Number of Columns:</p>');
          $('.aloha-sidebar-inner').append('<select id="articles" class="sidebar-item"><option>1</option><option>2</option><option>3</option><option>4</option></select>');
    });

        function addSection() {     
          var idCounter = 0;
          alert($('#articles').val());
};

警报窗口不断返回值 1。可能是因为我动态创建了 select 元素而出现了问题？

我尝试过使用$( "#columns option:selected" ).val();，但仍然没有。我什至尝试使用text()，但仍然没有； alert 不断返回第一个选项。

我也尝试使用 $('#add-section').click 或 $('#articles').change 监听器，但它们似乎没有响应。

【问题讨论】：

请在jsfiddle.net 上为您的问题创建一个工作演示。第一个选项应该默认被选中，所以不清楚你为什么期望它与那个不同。
ID 是唯一的，对吧？！
在这里可以正常工作：jsfiddle.net/uJur9/1 你是如何提醒的？ onclick 或 onchange 等？
如果不是1，您希望警报显示什么？
这可能是一个重复的 ID 问题。他还有另一个select 具有相同的#columns id

标签： javascript jquery html select aloha-editor

【解决方案1】：

I answered这个问题最后：

    $('#columns').change(function () {
    var optionSelected = $(this).find("option:selected");
    var valueSelected  = optionSelected.val();
    var textSelected   = optionSelected.text();
  });

【讨论】：

这是我的荣幸 DEUTSCHWULF！

【解决方案2】：

要获取选定的列，请使用以下代码

$('#columns').change(
    function()
    {
        alert($('#columns').val());
    });

小提琴：jsfiddle.net/EnJz5

【讨论】：