jQuery .find() 找不到 <option> 标记并且行为很奇怪答案

【问题标题】：jQuery .find() won't find <option> tag and acts quite weirdjQuery .find() 找不到 <option> 标记并且行为很奇怪
【发布时间】：2021-08-09 23:36:49
【问题描述】：

我正在编写一个包含表格的网页，可以使用 jQuery 对其进行过滤。使用 bootstrap 4 下拉菜单可以进行这种过滤。我为每个选项指定了一个值：

<select id="inputState" class="btn btn-outline-secondary" name="sesso">
         <option class="dropdown-item" value="Tutti">Tutti</option>
         <option class="dropdown-item" value="Confezionati">Confezionati</option>   
 </select>

我试过这个用jQuery写的超级简单的代码，但是不行。

$(document).ready(function(){
var tipo = $("select").find("option").val;


if (tipo != 'Tutti'){

console.log($(this).find("option").val);
console.log('ciao');    
    
}else{
    
console.log('Addio');   
    
    
}

});

它不是打印它应该打印的东西，而是打印一堆代码和指令，这是标题：

/! jQuery v3.2.1 -ajax,-ajax/jsonp,-ajax/load,-ajax/parseXML,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-event/ajax,-effects,-effects/Tween,-effects/animatedSelector | (c) JS Foundation and other contributors | jquery.org/license / !

注意网页是 PHP 生成的。

【问题讨论】：

谢谢你们。我是新手，请原谅我的愚蠢错误。

标签： javascript php html jquery bootstrap-4

【解决方案1】：

在 jQuery 中，val 是一个方法而不是一个属性，所以它必须是 .val()，而不是 .val。此外，要直接读取 select 元素上的选定值调用 val()，而不是所有可用 option 元素的集合。试试这个：

$(document).ready(function() {
  var tipo = $("select").val();  
  if (tipo != 'Tutti') {
    console.log('ciao');
  } else {
    console.log('Addio');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="inputState" class="btn btn-outline-secondary" name="sesso">
  <option class="dropdown-item" value="Tutti">Tutti</option>
  <option class="dropdown-item" value="Confezionati">Confezionati</option>
</select>

【讨论】：

【解决方案2】：

您正在使用 val 作为属性，它是一种方法。

$(document).ready(function(){
var tipo = $("select").find("option").val();

if (tipo != 'Tutti'){

console.log($(this).find("option").val());
console.log('ciao');    
    
}else{
    
console.log('Addio');   
    
    
}

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="inputState" class="btn btn-outline-secondary" name="sesso">
         <option class="dropdown-item" value="Tutti">Tutti</option>
         <option class="dropdown-item" value="Confezionati">Confezionati</option>   
 </select>

【讨论】：

【解决方案3】：

如果您只需要选定的value，则其他答案就足够了，但是如果您确实需要直接访问选定的<option> 及其属性/属性，则可以对匹配元素的集合使用filter(':selected') 方法。
下面我演示了在页面加载时以及在所选选项更改时访问所选选项的数据。

$(document).ready(function() {
  const $inputState = $('#inputState')

  $inputState.change(function() {
    // value of <select>
    let theValue = $(this).val()
    console.log("select value:", theValue)

    // first selected <option> element
    let $selectedOption = $(this).find('option').filter(':selected').first()
    console.log("option value:", $selectedOption.val())
    console.log("option data:", $selectedOption.data())
  })

  // trigger change on load
  $inputState.change()

});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />

<select id="inputState" class="btn btn-outline-secondary" name="sesso">
  <option class="dropdown-item" value="Tutti" data-option="14">Tutti</option>
  <option class="dropdown-item" value="Confezionati" selected data-option="option data">Confezionati</option>
</select>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

【讨论】：