为什么我无法在单击选项时获取 jquery 中选定选项的值？答案

【问题标题】：Why i am unable to fetch the values of selected options in jquery on click of option?为什么我无法在单击选项时获取 jquery 中选定选项的值？
【发布时间】：2020-12-22 10:18:22
【问题描述】：

我有以下带有选项的选择菜单。

 <select name="assigneeSelect" id="{{this.commonID}}" class="custom-select sources" key="{{this.id}}" placeholder="{{this.assignee}}">
    <option value="5f4a31eb75d1ab1668d11765">Charlotte Miles</option>
    <option value="d91c3fb7642c6d415880301e1c776df4">Sulekha Yadav</option>
    <option value="5f4d49636dba221200f2cc1f">Adele Armstrong</option>
  </select>

所以在 jQuery 中，我用更多的类来包装这段代码，如下所示，因为我在同一页面上有多个选择菜单选项。

$(".custom-select").each(function() {
var classes = $(this).attr("class"),
    id      = $(this).attr("id"),
    name    = $(this).attr("name");

var template =  '<div class="' + classes + '">';
    template += '<span class="custom-select-trigger">' + $(this).attr("placeholder") + '</span>';
    template += '<div class="custom-options">';
    $(this).find("option").each(function() {
      template += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>';
    });
template += '</div></div>';

$(this).wrap('<div class="custom-select-wrapper"></div>');
$(this).hide();
$(this).after(template);
});

$(".custom-option:first-of-type").hover(function() {
$(this).parents(".custom-options").addClass("option-hover");
}, function() {
$(this).parents(".custom-options").removeClass("option-hover");
});

$(".custom-select-trigger").on("click", function() {
$('html').one('click',function() {
  $(".custom-select").removeClass("opened");
});

$(this).parents(".custom-select").toggleClass("opened");
event.stopPropagation();
});

所以我在选择菜单中单击选项时检索选定的文本。我不想在所选菜单的更改上检索它，因为我必须在单击时调用一个 AJAX Get。表示从选择下拉列表中选择其中一个选项后。

$(".custom-option").on("click", function() {


**var text = $(this).text();**
**var val = $(this).val();**

alert("id ="+id+" text = "+text+" val ="+val);

})

但在 val 中，虽然我得到了文本，但我没有得到选项的值。

【问题讨论】：

标签： jquery node.js drop-down-menu

【解决方案1】：

你创建你的custom-option 使用：

<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>'

这没有 jquery 可以使用 .val() 提取的“值”，但它确实有 data-value=..。

您可以使用获取数据值

var val = $(this).data("value");

【讨论】：