如何在jQuery的選擇下拉菜單中獲取選項文本

Question

在這里，我需要從選擇下拉列表中獲取選項文本並執行一些操作。 但是，我不知道我錯過了什么。 我得到兩個選項文本。 這是我嘗試過的。

 $('#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> 

JS菲德爾

Answer 1

js小提琴

$('#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");
   }
});

Answer 2

您的比較運算符不正確，應該是

temp == "Option 1"

不

temp = "Option 1"

小提琴

您還應該刪除.change(); 如果您不希望代碼在頁面加載時執行，請在函數末尾顯示。

Answer 3

您在兩個地方缺少> ：

<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>

Answer 4

您已經使用了賦值運算符。 應該是==而不是= 。

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

在這里查看更新的小提琴。

Answer 5

嘗試這樣-

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;
});

例如。 - 小提琴鏈接

Answer 6

temp =“選項1”是錯誤的表達式

temp ==“ Option 1”或temp ===“ Option 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();

Answer 7

$('#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>到選擇框中，以使該事件的所有選項可用。

演示版