如何在jquery中的select下拉列表中获取选项文本

时间:2015-01-02 06:40:36

标签: javascript jquery html

在这里,我需要从select下拉列表中获取选项文本并执行一些操作。但是,我不知道我错过了哪里。我得到两个选项文本。 这就是我的尝试。



$('#sel').change(function(){
    alert($(this).val());
   temp = $('#sel option:selected').text();
    alert("temp value " +temp);
    if(temp = "Option 1")
{
    alert("Option 1 is selected");
   //DO SOME OPERATIONS
}
 if(temp = "Option 2")
{
    alert("Option 2 is selected");
    //DO SOME OPERATIONS
}
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="sel" id="sel">
    <option value="1">Option 1</option>
     <option value="2">Option 2</option
      <option value="3">Option 3</option
</select>
&#13;
&#13;
&#13;

JS FIDDLE

7 个答案:

答案 0 :(得分:1)

js fiddle

$('#sel').change(function(){
    alert($(this).val());
   temp = $('#sel option:selected').text();
   alert("temp value " +temp);
   if(temp == "Option 1")
   {
       alert("Option 1 is selected");
   }
   if(temp == "Option 2")
   {
       alert("Option 2 is selected");
   }
});

答案 1 :(得分:1)

您的比较运营商不正确,应该是

temp == "Option 1"

temp = "Option 1"

FIDDLE

如果您不希望代码在页面加载时执行,也应该在函数末尾删除.change();

答案 2 :(得分:1)

您在两个地方缺少>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="sel" id="sel">
    <option value="1">Option 1</option>
     <option value="2">Option 2</option> <!-- here -->
      <option value="3">Option 3</option> <!--and here -->
</select>

答案 3 :(得分:1)

您使用过赋值运算符。它应该是==而不是=

if (temp == "Option 1") {
    alert("Option 1 is selected");
}
if (temp == "Option 2") {
    alert("Option 2 is selected");
}

See updated fiddle here.

答案 4 :(得分:1)

试试这个 -

Html -

<select id='job_title'>
    <option value='' class='job' role=''>- Select -</option>
    <option value='1' class='job1' role='Accountant'>Accountant</option>
    <option value='2' class='job2' role='Dev. Support'>Dev. Support</option>
</select>

<br />
<input type='text' id='catch_value'>

jQuery -

$('#job_title').live('change', function(){
    var m = (this.value);
    var n = $('.job'+m).attr('role');
    $('#catch_value').val(n);
    return false;
});

EG。 - Fiddle Link

答案 5 :(得分:1)

temp =“选项1”是错误的表达

temp ==“Option 1”或temp ===“选项1”是正确的表达式

见下文

$('#sel').change(function(){
    alert($(this).val());
   temp = $('#sel option:selected').text();
    alert("temp value " +temp);
    if(temp === "Option 1")
{
    alert("Option 1 is selected");
   //DO SOME OPERATIONS
}
 if(temp === "Option 2")
{
    alert("Option 2 is selected");
    //DO SOME OPERATIONS
}
}).change();

答案 6 :(得分:1)

$('#sel').change(function(){
    var temp = this[this.selectedIndex].innerHTML;
    if(temp == "Option 1") {
        alert("Option 1 is selected");
    }
    if(temp == "Option 2") {
        alert("Option 2 is selected");
    }
    if(temp == "Option 3") {
        alert("Option 3 is selected");
    }
});

同时将此<option selected disabled>Options:</option>添加到您的选择框中,以便为该活动提供所有选项。

Demo