Question

我正在尝试从选择multiple="multiple"选项dropdown中获取所有选定项目的名称。

在我的html页面中，我有以下代码段：

<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
     <option selected="selected" value="1">Washroom</option>
     <option  value="2">Restaurant</option>
</select>

在我的JS文件中，我有以下代码片段：

var categoryNameArray = $('#ddlCategory').val();
console.log("category = " + categoryNameArray[0];

但是，变量categoryNameArray只给出了所选项目的数组，我想要的是所选项目的名称。有人可以告诉我如何使这项工作？谢谢！

Answer 1

由于val并未提供您想要的内容，因此我假设您需要所选项目的 text 数组。

你可以这样：

var selectedTextArray = $("#ddlCategory option:selected").map(function() {
    return $(this).text();
}).get();

找到所有选定的项目，然后使用map获取每个项目的文本（包装在jQuery对象中），然后使用get将该jQuery对象转换为数组。 / p>

您可以使用return this.text;而不是return $(this).text();，因为HTMLOptionElement具有text属性（大多数元素都不会），但我可以使用$("#btn").on("click", function() { var selectedTextArray = $("#ddlCategory option:selected").map(function() { return $(this).text(); }).get(); console.log(selectedTextArray); });。请务必使用我的目标浏览器进行测试。

示例：

＆＃13;

Select some items, then click
<input type="button" id="btn" value="here">
<br>
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
  <option value="1">Washroom</option>
  <option value="2">Restaurant</option>
  <option value="3">Service Station</option>
  <option value="4">Drive-Thru</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

this.text

＆＃13;

$(this).text()代替$("#btn").on("click", function() { var selectedTextArray = $("#ddlCategory option:selected").map(function() { return this.text; }).get(); console.log(selectedTextArray); });的示例：

＆＃13;

Select some items, then click
<input type="button" id="btn" value="here">
<br>
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
  <option value="1">Washroom</option>
  <option value="2">Restaurant</option>
  <option value="3">Service Station</option>
  <option value="4">Drive-Thru</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

getProfile() {
    let cached: any;
    if (cached = sessionStorage.getItem(this._baseUrl)) {
        return Observable.of(JSON.parse(cached));
    } else {
        return this.http.get(this._baseUrl).map((response: Response) => {
            sessionStorage.setItem(this._baseUrl, response.text());
            return response.json();
        });
    }
}

＆＃13;

Answer 2

在您的案例val()中，

1, 2 ...会返回所选选项的值。您应该使用text()来获取所选选项的名称。您可以使用each()方法遍历所有选定的选项，并使用text()获取所选值：

$('a').on('click', function(e) {
  e.preventDefault();
  $('#ddlCategory option:selected').each(function(i, selected) {
    console.log($(selected).text());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
  <option selected="selected" value="1">Washroom</option>
  <option value="2">Restaurant</option>
</select>
<a href="#">Send</a>

您可以详细了解val()的工作原理 here 。

您可以详细了解text()的工作原理 here 。

Answer 3

试试这个：

＆＃13;

var categoryNameArray = 
$('#ddlCategory option:selected').map(function(){
    return this.text;
}).get();
console.log("category = " + categoryNameArray);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
            <option selected="selected" value="1">Washroom</option>
            <option selected="selected" value="2">Restaurant</option>
            <option  value="3">Coffee Shop</option>
            <option  value="4">Hotels</option>
    </select>

＆＃13;

Answer 4

获取所有选定值的简便方法是$（'＃ddlCategory'）。val（）;

从select multiple && 34; multiple＆＃34;中获取所有选定项目的名称选项下拉列表

4 个答案: