jQuery select2获取select标签的值?

时间:2013-11-11 14:03:50

标签: jquery jquery-select2

朋友您好,这是我的代码:

<select id='first'>
  <option value='1'> First  </option>
  <option value='2'> Second </option>
  <option value='3'> Three  </option>
</select>

这是我的select2代码:

$("#first").select2();

以下是获取所选值的代码。

$("#first").select2('val'); // It returns first,second,three.

这会返回first,second,three这样的文字,我希望获得1,2,3 意味着我需要选择框的值,而不是文本。

12 个答案:

答案 0 :(得分:115)

$("#first").val(); // this will give you value of selected element. i.e. 1,2,3.

答案 1 :(得分:47)

要获取Select元素,您可以使用$('#first').val();

获取所选值的文字 - $('#first :selected').text();

是否可以发布您的select2()功能代码

答案 2 :(得分:33)

$("#first").select2('data')会将所有数据作为地图

返回

答案 3 :(得分:7)

此解决方案允许您忘记选择元素。如果您没有选择元素的ID,则会很有帮助。

Bundler.require(*Rails.groups(:assets => %w(development test)))

答案 4 :(得分:7)

如果您使用的是ajax ,则可能需要在选择后立即获取更新值

//Part 1

$(".element").select2(/*Your code*/)    

//Part 2 - continued 

$(".element").on("select2:select", function (e) { 
  var select_val = $(e.currentTarget).val();
  console.log(select_val)
});

致谢:Steven-Johnston

答案 5 :(得分:2)

请参阅this fiddle 基本上,您希望得到value - 代码的option,但您总是尝试使用select获取$("#first").val() - 节点的值。

所以我们必须选择选项标签,我们将使用jQuerys选择器:

$("#first option").each(function() {
    console.log($(this).val());
});

$("#first option")选择每个option,其中first是元素{{1}}的子元素。

答案 6 :(得分:2)

试试这个:

$('#input_id :selected').val(); //for getting value from selected option
$('#input_id :selected').text(); //for getting text from selected option

答案 7 :(得分:2)

上述解决方案不适用于最新的select2(4.0.13)

使用jQuery,您可以根据文档:https://select2.org/programmatic-control/retrieving-selections

使用此解决方案来检索值。
$('#first').find(':selected').val();

答案 8 :(得分:1)

简单的答案是:

$('#first').select2().val()

你也可以这样写:

 $('#first').val()

答案 9 :(得分:1)

$(".element").select2(/*Your code*/)
.on('change', function (e) {
     var getID = $(this).select2('data');
     alert(getID[0]['id']); // That's the selected ID :)
});

答案 10 :(得分:0)

其他答案对我不起作用所以我开发了解决方案:

我使用class = “option-item”创建了选项,以便轻松定位

HTML:

<select id="select-test">
<option value="5-val" id="first-id" class="option-item"> First option </option>
</select>

然后,对于每个选定的选项,我添加了显示无属性

CSS:

option:checked {
   display: none;
}

现在我们可以在我们的SelectBox中添加更改,通过简单的:隐藏属性

找到我们选择的显示无属性的选项

JQuery:

$('#select-test').change(function(){
//value 
    $('#select-test').find('.option-item:hidden').val();
//id
    $('#select-test').find('.option-item:hidden').attr('id');
//text
    $('#select-test').find('.option-item:hidden').text();
});

工作小提琴:https://jsfiddle.net/Friiz/2dk4003j/10/

答案 11 :(得分:0)

解决方案:

elf_update(elf, ELF_C_WRITE);