获取 jQuery 个所选元素的值
Get value of jQuery chosen element
我正在尝试获取 jQuery 所选元素的值,但未获取任何内容。我认为这可能是因为当我搜索它时还没有值,但不确定,因为当页面加载时,我已经可以在页面上看到我需要获取的值。我在这里搜索了一些线程,但没有适合我的解决方案。如果有人知道如何处理这个,我会很高兴,谢谢!
(我必须在 <a class="chosen-single">
中获取 <span>
的值),这不是因为我没有包含 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());
});
});
});
您可以使用 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 <select></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>
我正在尝试获取 jQuery 所选元素的值,但未获取任何内容。我认为这可能是因为当我搜索它时还没有值,但不确定,因为当页面加载时,我已经可以在页面上看到我需要获取的值。我在这里搜索了一些线程,但没有适合我的解决方案。如果有人知道如何处理这个,我会很高兴,谢谢!
(我必须在 <a class="chosen-single">
中获取 <span>
的值),这不是因为我没有包含 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());
});
});
});
您可以使用 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 <select></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>