在選擇列表中的jquery選擇

Question

我有一個關於jquery選擇的問題。我想定位一個選擇列表，當你從選擇列表中選擇「Dr」時，那麼應該隱藏下面的div。

codepen example

$(document).ready(function(){ 
var num = Dr; 
$("div#myselect select.select option").each(function(){ 
    if($(this).selected()==num){ 
     $(".test1").hide(); 
    } 
    }); 
}); 

Answer 1

有很多錯在這裏。一瞥：

1. Dr是一個語法錯誤。字符串應該用引號括起來。
2. 當頁面加載時，您正在檢查選定的值，而不給用戶實際選擇任何內容的機會。
3. 您正在尋找select與class="select"，它不存在於您的HTML中。
4. 您還在尋找div與id="myselect"，這也不存在於您的HTML中。
5. 沒有.selected（）函數。

我嫌疑你意味着更多的東西像下面這樣：

$(document).ready(function(){ 
    var num = 'Dr'; 
    $("select").change(function(){ 
     if($(this).find('option:selected').text()==num){ 
      $(".test1").hide(); 
     } 
    }); 
}); 

注意的變化：

1. 在引號包裹Dr，因爲它是一個字符串。
2. 創建一個change事件處理程序，而不是直接檢查HTML的當前狀態。只要目標元素「更改」，該事件處理程序就會被調用。 （其值已由用戶修改。）
3. 用select替換選擇器，以將頁面上的<select>表單元素作爲目標。如果您的目標代碼中有更多<select>元素，那麼您也可以使用您的目標代碼，或以多種方式中的任何一種來識別您的目標元素。
4. 一旦調用change事件，代碼會查找<select>中的選定選項並檢查該選項的文本。 （由於value是一個數字，而不是字符串'Dr'。）

我叉你CodePen這裏展示。

此外，如果你想重新顯示當另一個選項被選中的元素，你會添加一個else塊：

if($(this).find('option:selected').text()==num){ 
    $(".test1").hide(); 
} else { 
    $(".test1").show(); 
} 

Answer 2

了一些錯誤。首先你需要用引號括起字符串。接下來，您想要在有人進行更改時檢查選擇列表，因此您不想使用.each()而是使用.change()事件。然後，您不想檢查數值，因爲使用.text()或.html()可以獲取所選選項的內容而不是.val()。

例子：

$(document).ready(function() { 
 
    var num = 'Dr'; 
 
    $("#myselect").change(function() { 
 
    if ($(this).find('option:selected').text() == num) { 
 
     $(".test1").hide(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="myselect"> 
 
    <option value="1">Mr</option> 
 
    <option value="2">Mrs</option> 
 
    <option value="3">Ms</option> 
 
    <option value="4">Dr</option> 
 
    <option value="5">Prof</option> 
 
</select> 
 

 
<div class="test1">test1</div>