获得jQuery选择元素的价值

时间:2017-04-24 07:13:21

标签: javascript jquery html css jquery-chosen

我试图获得jQuery Chosen元素的价值,但没有得到任何东西。我认为这可能是因为当我搜索它时没有任何价值,但不确定,因为当页面加载时,我已经可以在页面上看到我需要获取的值。我在这里搜索了一些帖子,但没有解决方案适合我。如果有人知道如何搬家,我会很高兴,谢谢! (我必须在<span>内获得<a class="chosen-single">的价值)并不是因为我没有包含jQuery库。我有,但我还没有把它贴在这里。

FIDDLE: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());
        });
    });
});

1 个答案:

答案 0 :(得分:2)

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

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

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

&#13;
&#13;
$(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());
      });
    });
});
&#13;
* { font-family: arial; }
h1 { font-size: 1.5em; }
h2 { font-size: 1.3em; }
&#13;
<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>
&#13;
&#13;
&#13;