从选择框中获取选定的HTML文件

Question

我有一个选择下拉列表。 我想获取所选选项的html

<select id="filter" multiple="multiple">
     <option>Yes</option>
     <option>No</option>
</select>

例如，如果我选择是和否，我希望输出为

<option>Yes</option>
<option>No</option>

Answer 1

使用ECMAScript很容易地做到这一点。

 let select = document.getElementById('filter'); select.addEventListener('change', event => { let checkedOption = [...event.target.children].find(c => c.selected); console.log(checkedOption.outerHTML); });

 <select id="filter" multiple="multiple"> <option>Yes</option> <option>No</option> </select>

Answer 2

 function fun(e){ var concat=''; for(var i = 0; i<e.children.length; i++) { var str = e.children[i].outerHTML concat +=str; } console.log(concat); }

 <html> <head> <title>JavaScript Popup Example 3</title> </head> <body> <select id="filter" multiple="multiple" onChange='fun(this)'> <option>Yes</option> <option>No</option> </select> </body> </html>

Answer 3

如果要在控制台中输出，请继续。 无需jQuery。

 filter.addEventListener('change', function() { console.log([...this.querySelectorAll(':checked')]); // even simpler but not available in IE 11: console.log([...filter.selectedOptions]); })

 <select id="filter" multiple="multiple"> <option>Yes</option> <option>No</option> </select>

如果您要选择的是这些项目中的值，只需向:checked元素询问其textContent ：

 filter.addEventListener('change', ()=>{ console.log([...filter.querySelectorAll(':checked')].map(i=>i.textContent)); })

 <select id="filter" multiple="multiple"> <option>Yes</option> <option>No</option> </select>

Answer 4

您可以使用jQuery这样来实现。

 $("#filter").on('change', function(){ // the next line will find all the options which are selected options = $(this).find('option:selected'); // loop through all the selected options and print them to console for(var i = 0; i < options.length; i++){ option = options[i]; console.log(option.outerHTML); } });

 select{ width: 100px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="filter" multiple="multiple"> <option>Yes</option> <option>No</option> </select>

Answer 5

在Javascript的multiselect标记中获取选定的值时，存在类似的问题

您可以使用element.selected命令找到选定的OPTION元素。 简而言之，用于查找这些HTML元素的函数将如下所示：

var list = document.getElementById("filter");
var button = document.getElementById("button");

button.addEventListener("click", function(e){
    for(var i=0; i<list.length; i++){
    if(list.options[i].selected) {
        console.log(list.options[i]);
    };
  };
});

https://jsfiddle.net/bgz2cr9w/

Answer 6

Using jquery you can get your desired output.


$(document).on('change', '#filter', function(){
    $.each($(this).find('option:selected'), function(i,d){
        console.log(d);
    })
});

从选择框中获取选定的HTML文件

问题描述

6 个解决方案

解决方案1
2 已采纳 2018-09-26 07:34:33

解决方案2
1 2018-09-26 07:30:08

解决方案3
0 2018-09-26 07:09:35

解决方案4
0 2018-09-26 07:09:45

解决方案5
0 2018-09-26 07:20:49

解决方案6
0 2018-09-26 07:43:04

从选择框中获取选定的HTML文件

问题描述

6 个解决方案

解决方案1 2 已采纳 2018-09-26 07:34:33

解决方案2 1 2018-09-26 07:30:08

解决方案3 0 2018-09-26 07:09:35

解决方案4 0 2018-09-26 07:09:45

解决方案5 0 2018-09-26 07:20:49

解决方案6 0 2018-09-26 07:43:04

解决方案1
2 已采纳 2018-09-26 07:34:33

解决方案2
1 2018-09-26 07:30:08

解决方案3
0 2018-09-26 07:09:35

解决方案4
0 2018-09-26 07:09:45

解决方案5
0 2018-09-26 07:20:49

解决方案6
0 2018-09-26 07:43:04