如果選中複選框更改選擇選項

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混合在一起可以嗎？