jquery在下拉菜单中找到所选项目的值

Posted 2023-05-09

【中文标题】jquery在下拉菜单中找到所选项目的值

【英文标题】：jquery find value of selected item in drop down with a twist

【发布时间】：2011-08-31 09:41:20

【问题描述】：

我有一个下拉列表显示选择标签中的值，我通常只使用 $('#ID').val() 来获取值，但 ID 是未知的或动态添加的行。

在关闭选择标记之后，我有一个我正在使用的 jquery ui 图标，单击该图标将捕获当前选择的下拉选项的值（该值将复制到其他选择列表）。这段代码循环，所以我知道我需要使用某种 .find() 或 .parent() 或类似的东西，但我还没有深入了解。

这里是源代码：

<tr>
<th class="form"><label>SI Contact</label></th>
<td id="name_29805"><div style="float: left;">
        <select name="contactsbcuid" id="contactsbcuid_29805" sid="29805" ordr="1">
            <option value="userID1234">Doe, John</option>
            <option value="userID1235">Doe, Jane</option>
            ...
            <option value="userID1236">Smith, David</option>
        </select>
        <input name="orig_contactsbcuid" id="orig_contactsbcuid_29805" value="userID1235" sid="29805" ordr="1" type="hidden">
    </div>
    <div style="float: right;"><span class="ui-icon ui-icon-copy vtip" onClick="CopyDown('contactsbcuid',1)" id="select_contactsbcuid_29805" title="Copy the selected value down the list." style="float: right;"></span></div></td>

【问题讨论】：

您的源代码丢失请重试

我在使用 Coldfusion 自定义标签格式化我的源代码时遇到了一些困难。如果这令人困惑，我可以重写它以使更广泛的 *** 社区更容易。尽管有 CF 代码，但这更像是一个 jquery 问题。

你能把生成后的代码展示给你看，而不是coldfusion

你能显示输出的客户端代码吗？

注意：..post 中的代码现在是生成的代码，而不是 CF..

【参考方案1】：

表格单元格中似乎只有一个选择。 所以找到'td'就足够了，当你找到它时搜索选择。

var value = $(this).parents('td').find('select').val();

【讨论】：

这是我正在尝试的，但我看到您使用的是parents，而我使用的是parent var vl=$(this).parent().next().find("select option:selected").val(); ...和其他一些选择器:)

我通常觉得 .parents 更容易使用。如果您使用 find，请尝试查询 select 元素，而不是 selected 选项。如果您在选择元素上使用 val()，它应该返回所选选项的值。

var vl = $(this).parents('td').find('select').val(); alert('the selected value is:' + vl); 警报给了我未定义的 vl。你还有什么其他想法？

你在哪里使用 $(this)？如果它在 CopyDown 函数内，则应在调用该函数时传递对它的引用，例如CopyDown(this, 'contactsbcuid', 1) 并改用该参数。见：jsfiddle.net/RkYU8

@nxt 这就是我正在寻找的东西，但我很惊讶它成功了。您只在函数中定义了一个元素，但在 onClick 中定义了三个。这是如何工作的？

【参考方案2】：

Is this jsFiddle what you are essentially looking for?

jQuery:

$('span[id^="select_contactsbcuid"]').click(function() 

    var $select = $('select[name^="' + this.id.split("_")[1] + '"]');
    if ($select.length)  alert($select.val()); 

);

【讨论】：

是的，但该值需要从单独的函数中获取。另外，我不能使用 .change，它必须是一个函数。输出集非常大，等待 jQuery 将所有选择器/方法应用于代码正在创建一个脚本消息，大意是“这个脚本需要很长时间才能完成。你想取消脚本吗？是的no" 我只想在被调用时触发它，因此是按钮。

如果您想在大量元素上使用它，则附加所有事件处理程序需要很长时间。您应该考虑使用 jQuery 委托函数，这样您就可以利用事件冒泡并减少处理程序的数量

@nxt - 我总是在我的代码中使用delegate() ...我只是展示了一种简单的方法来获得 OP 想要的价值。