如果选中复选框更改选择选项

Question

我想生成选择选项取决于复选框。就像我有3个值的复选框：Film，Videoclip，Serial和<select>窗体。当我点击“电影”我想有<select>与选项：喜剧，恐怖&当我“Videoclip”<select>将改变值：嘻哈，流行。

我想了几个小时与JavaScript & jQuery的，但仍然没有：/

Answer 1

你能尝试使用jQuery和事件，这样的事情？

$(function() { 
 
    var checked = ["Check 1", "Check 2", "Check 3"]; 
 
    var unchecked = ["Uncheck 1", "Uncheck 2", "Uncheck 3"]; 
 
    function updateSelect (arr) { 
 
    $("select").html(""); 
 
    $.each(arr, function (i, v) { 
 
     $("select").append('<option value="' + v + '">' + v + '</option>'); 
 
    }); 
 
    } 
 
    updateSelect (unchecked); 
 
    $("#check").change(function() { 
 
    if (this.checked) 
 
     updateSelect(checked); 
 
    else 
 
     updateSelect(unchecked); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-1.9.1.js"></script> 
 
<label><input type="checkbox" id="check" /> Check</label><br /> 
 
<select></select>

您的片段现在已准备就绪。看一看：

$(function() { 
 
    var iFilm = ["Comedy", "Horror", "Sci-Fi"]; 
 
    var iVideoClip = ["Hip-Hop", "Pop", "Rap"]; 
 
    var iSerial = ["Serial 1", "Serial 2", "Serial 3"]; 
 
    $("input:checkbox").change(function() { 
 
    $("select").html(""); 
 
    $("input:checked").each(function() { 
 
     addItemsFromArray(eval("i" + this.id)); 
 
    }); 
 
    }); 
 
    function addItemsFromArray (arr) { 
 
    $.each(arr, function (i, v) { 
 
     $("select").append('<option value="' + v + '">' + v + '</option>'); 
 
    }); 
 
    } 
 
});

<script src="https://code.jquery.com/jquery-1.9.1.js"></script> 
 
<label><input type="checkbox" id="Film" /> Film</label><br /> 
 
<label><input type="checkbox" id="VideoClip" /> VideoClip</label><br /> 
 
<label><input type="checkbox" id="Serial" /> Serial</label><br /> 
 
<select></select>

注：我已经使用eval，这是强烈反对。不使用eval，另一部分使用data-*属性。

$(function() { 
 
    var data = {}; 
 
    data.iFilm = ["Comedy", "Horror", "Sci-Fi"]; 
 
    data.iVideoClip = ["Hip-Hop", "Pop", "Rap"]; 
 
    data.iSerial = ["Serial 1", "Serial 2", "Serial 3"]; 
 
    $("input:checkbox").change(function() { 
 
    $("select").html(""); 
 
    $("input:checked").each(function() { 
 
     addItemsFromArray(data[$(this).attr("data-content")]); 
 
    }); 
 
    }); 
 
    function addItemsFromArray (arr) { 
 
    $.each(arr, function (i, v) { 
 
     $("select").append('<option value="' + v + '">' + v + '</option>'); 
 
    }); 
 
    } 
 
});

<script src="https://code.jquery.com/jquery-1.9.1.js"></script> 
 
<label><input type="checkbox" id="Film" data-content="iFilm" /> Film</label><br /> 
 
<label><input type="checkbox" id="VideoClip" data-content="iVideoClip" /> VideoClip</label><br /> 
 
<label><input type="checkbox" id="Serial" data-content="iSerial" /> Serial</label><br /> 
 
<select></select>

在不同的音符，如果你想使只有一个选项可选的时间，随意从type="checkbox"改变type="radio"并把同一个名字。

Answer 2

从你的问题，我假设你有3复选框，每个不同的值。如果您的应用程序只允许1个选项，为什么不使用单选按钮呢？

除此之外，它实际上很容易。只要把“的onchange”事件监听器上的复选框，然后填充您<select>标签（无论使用预先写好的变量或AJAX）的香草JS

<input type="checkbox" value="film" id="film"> 
<select id="someDropdown"></select> 

<script> 
    var film = document.getElementById("film"); 
    film.addEventListener("change", function(){ 
     // populate the dropdown list 
     var options = "<option>Comedy</option>" + "<option>Horror</option>" 
     document.getElementById("someDropdown").innerHTML = options; 
    }); 
</script> 

Answer 3

简单的例子试试这个：

var filmValues = { 
    comedy: 'Comedy', 
    horror: 'Horror' 
} 

$('#filmCb').change(function() { 
    if ($(this).is(":checked")) { 
     $.each(filmValues, function (key, value) { 
      $('#filmSelect') 
       .append($("<option></option>") 
       .attr("value", key) 
       .text(value)); 
     }); 
    } else { 
     $('#filmSelect').empty() 
    } 
}); 

的HTML：

<form action=""> 
    <input id="filmCb" type="checkbox" name="param" value="film">Film 
    <select id="filmSelect"></select> 
    <br> 
</form> 

Answer 4

<?php // Genre 

$query = "SELECT genre_pl FROM genre WHERE is_movie = 1 "; 
$result = mysqli_query($connection, $query); 
// Test if there was a query error 
confirm_query($result); ?> 
<script> var options_film = ""; </script> 
    <?php 
     while($row = mysqli_fetch_row($result)){ 
     ?> 
    <pre> <?php var_dump($row) ?> </pre> 
    <script> options_film += "<option>" + <?php echo json_encode($row); ?> +  "</option>"; </script> 
      <?php } ?> 

<?php mysqli_free_result($result); ?> 
<script type="text/javascript"> 
var film = document.getElementById("film"); 
    film.addEventListener("change", function(){ 
    // populate the dropdown list 
    document.getElementById("someDropdown").innerHTML = options_film; 
}); 

它的工作原理！但我觉得这是拙劣的编程。就像那样将javascript与php混合在一起可以吗？