Question

我希望在点击事件中使用jquery获取选择框选项值和选项文本，我的代码位于

之下

Html代码：

<select id="tskill" name="tskill" >
    <option value="1">One </option>
    <option value="2">Two </option>
    <option value="3">three </option>
    <option value="4">four </option>
</select>

Jquery的：

$('#tskill').click(function(){
    var id = $(this).val();
});

如果我点击＆＃34;四＆＃34;在下拉列表中，它将返回id = 4，但我希望获得带有文本的ID＆＃34;四个＆＃34;。我使用了那种语法

 $(this).text();
 $(this).html();

但它将返回整个选择框文本。如何获得可点击的文字值？

Answer 1

使用change事件代替click，如下所示。

$('#tskill').change(function () {
    var id = $(this).val();
    var text = $('option:selected', this).text(); //to get selected text
    alert(text)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="tskill" name="tskill" >
    <option value="1">One </option>
    <option value="2">Two </option>
    <option value="3">three </option>
    <option value="4">four </option>
</select>

Answer 2

我不确定您为什么使用click事件来获取所选的选项值和文本。如果这是您真正想要的，请尝试以下代码。

＆＃13;

$('#tskill').click(function(){
    var id = $(this).val();
    var text = $(this).find('option:selected').text();
  
    alert(id + ', ' + text);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="tskill" name="tskill" >
    <option value="1">One </option>
    <option value="2">Two </option>
    <option value="3">three </option>
    <option value="4">four </option>
</select>

＆＃13;

意味着

我建议使用change事件处理程序来完成工作。喜欢这个

＆＃13;

$('#tskill').change(function(){
    var id = $(this).val();
    var text = $(this).find('option:selected').text();
  
    alert(id + ', ' + text);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="tskill" name="tskill" >
    <option value="1">One </option>
    <option value="2">Two </option>
    <option value="3">three </option>
    <option value="4">four </option>
</select>

＆＃13;

jquery单击选项选项值和选项文本

2 个答案: