Question

大家好我正在学习javascript＆amp; jquery并且有一个相当简单的问题我无法弄清楚。我有一个3复选框，我点击时调用我的函数。

<div id="status_selected">
    <input type="checkbox" value="internal" onclick="myFunction()" 
           name="status[]" id="status_">internal            
    <input type="checkbox" value="external" onclick="myFunction()"
           name="status[]" id="status_">external
    <input type="checkbox" value="normal" onclick="myFunction()"
           name="status[]" id="status_">normal
</div>

这是一个选择框，根据上面复选框中选择的内容，应填写选项。

<select id="display_status" style = "display:none;"></select>

因此，如果检查了内部和外部，那么上面选择框的选项应该是相同的，如果它改变了，那么它也应该。

<script>
function myFunction() {
    var names = [];
    $('#status_selected input[type="checkbox"]:checked').each(function (i, el) {
        names.push(el.value);
    });
    document.getElementById('display_status').style.display = 'block';
    document.getElementById('display_status').innerHTML =
        '<option value="1">1</option><option value="2">2</option>';
}
</script>

这是我上面写的函数，我能够在names变量中检查所有名称，但我不知道如何将它作为选项传递给innerHTML。目前我有硬编码选项1和2.如何将变量值传递给它。

感谢您的帮助

Answer 1

当你使用jQuery时。完全使用它。

HTML 的

<div id="status_selected">
    <input type="checkbox" value="internal" name="status[]" />internal
    <input type="checkbox" value="external" name="status[]" />external
    <input type="checkbox" value="normal" name="status[]" />normal</div>
<select id="display_status" style="display:none;"></select>

代码的

$(document).ready(function () {
    $('#status_selected input[type="checkbox"]').on('change', function () {
        $('#display_status').empty(); //Clear previous HTML
        $('#status_selected input[type="checkbox"]:checked').each(function (i, el) {
            //Append option to select
           $('#display_status').append("<option value="+el.value+">"+el.value+"</option>");
        });
        $('#display_status').show(); //Show select
    });
});

DEMO

参考：

Answer 2

试试这个：

function myFunction()
{
var html="";
$('#status_selected input[type="checkbox"]:checked').each(function (i, el){
  html+="<option value="+el.value+">"+el.value+"</option>";
});
 document.getElementById('display_status').style.display='block';;
 document.getElementById('display_status').innerHTML=html;
}

你可以将整个过程缩小到：

function myFunction(){
$('#display_status').empty();
$('#display_status').css('display','block')
 $('#status_selected input[type="checkbox"]:checked').each(function (i, el){
  $('#display_status').append("<option value="+el.value+">"+el.value+"</option>");
 });}

Answer 3

在名称数组和构建选项上使用map函数，如下所示：

names.map(function(name){
    $('#display_status').append('<option value="'+name+'">'+name+'</option>');
});

而不是

document.getElementById('display_status').style.display = 'block';

您可以简单地将Jquery用作

$('#display_status').show();

根据变量的输出更改选择框选项

3 个答案: