Jquery $（文檔）的變化返回空值取消選擇

Question

我正在使用Django窗體，並修改選項列表（在HTML中）的其中一個字段使用$（文檔）形成。當我選擇一個選項（可多選列表，可以選擇不止一個 - 不是複選框），

this.value 

返回正確的值。但是，當我取消選擇該選項時，

this.value 

返回null。爲什麼會這樣呢？只有當選擇了某些東西時纔會返回一個值（而不是取消選擇）？如果是這樣，我怎麼可以得到被取消

這裏的元素的值是我的代碼：

$(document).on("change", "#name2", function() { 
    var url = #the url I'm using 
    url += "&field=" + this.value + "&visible=1"; 
    value = this.value 
    ...etc 

Answer 1

的jQuery val()將在<select multiple>或空返回值的數組（取決於版本）：

$(document).on('change', '#name2', function() { 
 
    var val = $(this).val() 
 
    console.log(val ? val : 'None selected'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<select size="20" id="name2" multiple=""> 
 
<option value="1">Item 1</option> 
 
<option value="2">Item 2</option> 
 
<option value="3">Item 3</option> 
 
<option value="4">Item 4</option> 
 
<option value="5">Item 5</option> 
 
<option value="6">Item 6</option> 
 
<option value="7">Item 7</option> 
 
<option value="8">Item 8</option> 
 
<option value="9">Item 9</option> 
 
<option value="10">Item 10</option> 
 
</select>

Answer 2

可以遍歷<select>件.selectedOptions財產與multiple屬性設置爲獲取每個選定的.value<option>元件在change事件

function getOptionValues(options) { 
 
    return Array.from(options, function(el) { 
 
    return el.value 
 
    }) 
 
} 
 

 
document.querySelector("select") 
 
.onchange = function() { 
 
    console.log(getOptionValues(this.selectedOptions)) 
 
}

<select multiple> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
</select>