Html select 多次获取 onchange 事件中的所有值
Html select multiple get all values at onchange event
我有一个 select 倍数的表格。我想在 onchange 事件中获得所有 selected 值,但我不知道这是否可能。我认为 "this.value" 只有 returns 最后一个元素 selected.
是否有可能在 onchange 时将所有元素select编辑为数组??
提前致谢。
<select name="myarray[]" id="myarray" class="select2-select req" style="width: 90%;" onChange="get_values(this.value)" multiple>
{foreach key=key item=value from=$myarray}
<option value="{$key}" >{$value}</option>
{/foreach}
</select>
可以用jquery来解决:
get_values=function(){
var retval = [];
$("#myarray:selected").each(function(){
retval .push($(this).val());
});
return retval;
};
这个例子在没有 jQuery 的情况下可能会有帮助:
function getSelectedOptions(sel) {
var opts = [],
opt;
var len = sel.options.length;
for (var i = 0; i < len; i++) {
opt = sel.options[i];
if (opt.selected) {
opts.push(opt);
alert(opt.value);
}
}
return opts;
}
<select name="myarray[]" id="myarray" class="select2-select req" style="width: 90%;" onChange="getSelectedOptions(this)" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
在下面的示例中,我正在构建所选选项和所选值的数组:
<select id="myarray" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
const myarray = document.getElementById('myarray');
myarray.addEventListener('change', (e) => {
const options = e.target.options;
const selectedOptions = [];
const selectedValues = [];
for (let i = 0; i < options.length; i++) {
if (options[i].selected) {
selectedOptions.push(options[i]);
selectedValues.push(options[i].value);
}
}
console.log(selectedOptions);
console.log(selectedValues);
});
我有一个 select 倍数的表格。我想在 onchange 事件中获得所有 selected 值,但我不知道这是否可能。我认为 "this.value" 只有 returns 最后一个元素 selected.
是否有可能在 onchange 时将所有元素select编辑为数组??
提前致谢。
<select name="myarray[]" id="myarray" class="select2-select req" style="width: 90%;" onChange="get_values(this.value)" multiple>
{foreach key=key item=value from=$myarray}
<option value="{$key}" >{$value}</option>
{/foreach}
</select>
可以用jquery来解决:
get_values=function(){
var retval = [];
$("#myarray:selected").each(function(){
retval .push($(this).val());
});
return retval;
};
这个例子在没有 jQuery 的情况下可能会有帮助:
function getSelectedOptions(sel) {
var opts = [],
opt;
var len = sel.options.length;
for (var i = 0; i < len; i++) {
opt = sel.options[i];
if (opt.selected) {
opts.push(opt);
alert(opt.value);
}
}
return opts;
}
<select name="myarray[]" id="myarray" class="select2-select req" style="width: 90%;" onChange="getSelectedOptions(this)" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
在下面的示例中,我正在构建所选选项和所选值的数组:
<select id="myarray" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
const myarray = document.getElementById('myarray');
myarray.addEventListener('change', (e) => {
const options = e.target.options;
const selectedOptions = [];
const selectedValues = [];
for (let i = 0; i < options.length; i++) {
if (options[i].selected) {
selectedOptions.push(options[i]);
selectedValues.push(options[i].value);
}
}
console.log(selectedOptions);
console.log(selectedValues);
});