Блог

У меня есть следующее меню выбора с параметрами.

  <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, я не получаю значение параметра, хотя я получаю текст.

Вы создаете свой 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");