获取jQuery选择元素的值

Question

我正在尝试获取 jQuery Chosen 元素的值，但没有得到任何东西。我认为这可能是因为当我搜索它时还没有任何价值，但不确定，因为当页面加载时，我已经可以在页面上看到我需要获取的值。我在这里搜索了一些线程，但没有解决方案对我有用。如果有人知道如何使用这个，我会很高兴，谢谢！ （我必须在 <a class="chosen-single"> 内获得 <span> 的值）这不是因为我没有包含 jQuery 库。我有，但我没有在这里粘贴。

小提琴：https://jsfiddle.net/camm8yLj/

<a class="chosen-single" tabindex="-1">
<span>I/37 Chrudim - obchvat, úsek křiž. I/17 - Slatiňany</span>
</a>



$(document).ready(function(){

    $('.chosen-single').chosen().change(function () {
        $(this).find('span').each(function(){
            alert('Text : '+$(this).text());
            alert('Value : '+$(this).val());
        });
    });
});

Answer 1

您可以使用find 方法获取文本。

$('select').find('option:selected') 检索您所有选择的选项。

$('select').chosen();
$('select').change(function(){
    $(this).find('option:selected').each(function(){
    alert('value:'+$(this).val()+' text: '+$(this).text());
  });
});

$(document).ready(function() {
    // Chosenify every multiple select DOM elements with class 'chosen'
    $('select.chosen').chosen();
    $('select.chosen').change(function(){
    	$(this).find('option:selected').each(function(){
      	alert('Value:'+$(this).val()+', Text: '+$(this).text());
      });
    });
});

* { font-family: arial; }
h1 { font-size: 1.5em; }
h2 { font-size: 1.3em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.css" rel="stylesheet"/>
<h1>The Chosenified multiple &lt;select&gt;</h1>
<p>
    <select name="fruits" class="chosen" multiple style="width: 500px;">
        <option value="banane">Banane</option>
        <option value="pomme">Pomme</option>
        <option value="poire">Poire</option>
        <option value="ananas" selected>Ananas</option>
        <option value="kiwi" selected>Kiwi</option>
        <option value="goyave">Goyave</option>
        <option value="abricot">Abricot</option>
        <option value="fraise" selected>Fraise</option>
        <option value="framboise">Framboise</option>
        <option value="avocat" selected>Avocat</option>
    </select>
</p>