Как заполнить поле выбора с помощью jquery?

Question

У меня есть требование, в котором, когда я нажимаю на элемент списка, элемент отображается как выбранный параметр в поле выбора

Мне нужно использовать только родную поле выбора, не говоря уже о элементах в список присутствуют в выбранном раскрывающемся списке

<button class="quick">QuickLink</button> 

<div class="list"> 
<ul class="apps"> 
    <li>CAPM</li> 
    <li>GCS</li> 
    <li>GRS</li> 
</ul> 
</div> 

<select class="xyz"> 
<option>CAPM</option> 
<option>GRS</option> 
<option>BDS</option> 
<option>CCAS</option> 
<option>WEDAT</option> 
<option>SDP</option> 
</select> 

jsfiddle ссылка ->https://jsfiddle.net/8s31w4t9/

Answer 1

свяжите click событий с li и использовать эти методы:

1. .text()

   Получить объединенное текстовое содержимое каждого элемента в наборе соответствующих элементов, в том числе их потомков , или установите текстовое содержимое согласованных элементов.

2. .val(value)

   Установить значение каждого элемента в наборе соответствующих элементов.

Код

$('.apps li').click(function() { 
    //Get the text of clicked element 
    var text = $(this).text(); 

    //Set the value of select 
    $('.xyz').val(text); 
}); 

DEMO

Answer 2

Проверьте это:

$(function(){ 

    $('.apps li').click(function(){ 
     $clicked = $(this); 
     $('.xyz option').each(function(){ 
      if ($(this).text() == $clicked.text()) { 
       $(this).prop('selected', true); 
      } 
     }); 
    }); 
}); 

Updated demo

Answer 3

Во-первых, вы хотите, чтобы click обработчик быть на li с, а не ваш ul. А во-вторых, лучше использовать функцию val и указать текст, который вы имеете в списке, чтобы быть val из select:

$('.apps li').click(function(){ 
    $('.xyz').val($(this).text()); 
}); 

Fiddle

Answer 4

Используйте следующее решение:

$(function(){ 
    $('.apps li').css("cursor","pointer") 
    $('.apps li').click(function() { 
    $('.xyz').val($(this).text()); 
    }); 
}); 

http://jsfiddle.net/z7s36noq/

Answer 5

Это должно делать работа:

$(function(){ 
    $('.apps > li').click(function() { 
    $('.xyz').val(this.innerHTML); 
    }); 
}); 

Answer 6

$('.apps').on('click', 'li', function() { 
    $('.xyz').val(this.innerHTML); 

}); 

Answer 7

Вы можете использовать атрибуты данных, чтобы сделать код гибким. И что, если вы хотите, чтобы ваш li имел другой текст для содержимого элемента option?

<ul data-select-target=".xyz"> 
    <li data-select-val="1">CAPM</li> 
    <li data-select-val="2">GRS</li> 
    <li data-select-val="3">BDS</li> 
</ul> 

<select class="xyz"> 
    <option value="1">CAPM</option> 
    <option value="2">GRS</option> 
    <option value="3">BDS</option> 
    <option value="4">CCAS</option> 
    <option value="5">WEDAT</option> 
    <option value="6">SDP</option> 
</select> 

JQuery:

$('[data-select-target] li').click(function(){ 
    var val = $(this).data('select-val'); 
    var target = $(this).closest('ul').data('select-target'); 
    $(target).val(val); 
}); 

Демо: JSFiddle