Question

我想生成选择选项取决于复选框。就像我有3个值的复选框：电影，视频片段，串行和<select>形式。当我点击＆＃34;电影＆＃34;我希望<select>可以选择：喜剧，恐怖＆amp;当我和＃34; Videoclip＆＃34; <select>会将值更改为：Hip-Hop，Pop。

我用javascript＆amp;尝试了几个小时jquery但仍然没有：/

Answer 1

你能尝试使用类似的jQuery和事件吗？

＆＃13;

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

＆＃13;

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

＆＃13;

您的代码段现已准备就绪。看看：

＆＃13;

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

＆＃13;

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

＆＃13;

注意：我使用了eval，强烈建议不要这样做。不使用eval，另一部分使用data-*属性。

＆＃13;

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

＆＃13;

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

＆＃13;

另一方面，如果您想一次只选择一个选项，请随时从type="checkbox"更改为type="radio"并使用相同的名称。

Answer 2

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

除此之外，实际上很容易。只需将“onchange”事件监听器放在复选框上，然后填充<select>标签（无论是使用预先编写的变量还是ajax）

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

试试这个：

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混合是可以的吗？

Answer 5

下面是一小段代码，用于分别选中每个复选框。

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

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

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

5 个答案: