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

Question

I would like to generate selects options depends on checkbox. Like I have checkbox with 3 values: Film, Videoclip, Serial and <select> form. When I click "Film" I would like to have <select> with option: Comedy, Horror & when I "Videoclip" <select> will change values to: Hip-Hop, Pop.

I'm trying for a few hours with javascript & jquery but still nothing :/

Answer 1

Can you try using jQuery and events something like this?

 $(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> 

Your snippet is now ready. Have a look:

 $(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> 

Note: I have used eval , which is strongly discouraged. Without using eval , the other part is using data-* attributes.

 $(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> 

On a different note, if you wanna make only one option selectable at a time, feel free to change from type="checkbox" to type="radio" and give the same name.

Answer 2

From your questions, I assume you have 3 checkbox with different value for each. If your application only allows 1 option, why dont use radio button instead?

Aside from that, it is actually quite easy. Just put the "onchange" event listener on your checkbox and then populate your <select> tag (whether using pre-written variable or ajax)

simple example in vanilla 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

Try this:

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()
    }
});

The 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;
});

It works! But I feel it's sloppy programming. It is okay to mix javascript with php just like that?

Answer 5

here is a small bit of code to make each checkbox selected individually.

$(document).ready(function(){
$("#Film").click(function(){
   `$("#Film").prop("checked", false);
});
$("#VideoClip").click(function(){
    `$("#VideoClip").prop("checked", false);
});
$("#Serial").click(function(){
    `$("#Serial").prop("checked", false);
});
});

And the HTML :

 <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 
 />