具有相同选项的多选类别答案

【问题标题】：Multiple select category with same options具有相同选项的多选类别
【发布时间】：2018-04-21 09:30:31
【问题描述】：

我需要创建一个网页，用户必须从下拉列表中选择不同类别的值，如下所示。

<div class ="SurveyFormContainer">
    <label for ="cat1">category 1</label>
    <select>
        <option value=0>1</option>
        <option value=1>2</option>
        <option value=2>3</option>
        <option value=3>4</option>
        <option value=4>5</option>
    </select>
    <br>
    <label for ="cat2">category 2</label>
    <select>
        <option value=0>1</option>
        <option value=1>2</option>
        <option value=2>3</option>
        <option value=3>4</option>
        <option value=4>5</option>
    </select>
</div>

我需要添加很多不同的类别，所以我的问题是：有没有办法重复使用相同的一组选项而不必每次都复制代码？

我对html很陌生，我试图在网上搜索解决方案，但找不到任何东西...感谢您的帮助！

【问题讨论】：

您在寻找纯 html 解决方案吗？
我真的不知道...我的意思是我必须将所有不同类别的输入保存在数据库中并在其他页面中使用它们，所以任何解决方案都非常受欢迎； )

标签： html drop-down-menu html-select

【解决方案1】：

您无法单独使用 HTML 来做到这一点，您需要另一种技术来帮助您做到这一点。

有很多方法可以实现这一点，例如使用服务器端编程语言（C#、PHP、JavaScript）或在前端使用 JavaScript。

如果您选择服务器端方法，则可以将常用选项分配给变量，并为共享这些值的选择框执行 for(each) 循环。

例如，在 PHP 中：

<?php

$sharedOptions = [
    0 => 1,
    1 => 2,
    2 => 3,
    3 => 4,
    4 => 5
];
?>
<!DOCTYPE html>
<html>
    <body>
        <div class="SurveyFormContainer">
            <label for="cat1">Cat 1</label>
            <select id="cat1" name="cat1">
                <?php foreach($sharedOptions as $key => $value) { ?>
                  <option value="<?php echo $key ?>">
                    <?php echo $value ?>
                  </option>
                <?php } ?>
                <option>Only for Cat 1</option>
            </select>

            <label for="cat2">Cat 2</label>
            <select id="cat2" name="cat2">
                <?php foreach($sharedOptions as $key => $value) { ?>
                  <option value="<?php echo $key ?>">
                    <?php echo $value ?>
                  </option>
                <?php } ?>

                <option value="50">Only for Cat 2</option>
            </select>
        </div>
    </body>
</html>

【讨论】：

像魅力一样工作，谢谢！还有一件事，通过 php，我也可以填充我的类别，对吗？意思是我可以根据数据库中保存的内容来选择要显示的选项吗？
您可以通过对 foreach 循环稍作修改来输出另一个属性为“selected”的选项

【解决方案2】：

您可以使用 JavaScript（或 Jquery）将一系列 Html 分配给一组元素。

$(document).ready(function(){
  var items={option1:{value:1,text:1},option2:{value:2,text:2}}

  //You may narrows the selector to an exact class e.g. $(".mySelect") instead of $("select")

  $.each(items, function (i, item) {

      $('select').append($('<option>', { 
          value: item.value,
          text : item.text 
      }));
  });

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Selection 1:
<select name="select1" class="mySelect"></select>
<br><br>

Selection 2:
<select name="select2" class="mySelect"></select>
<br><br>

此外，如果有多个选择，请不要忘记为<select> 设置名称。

【讨论】：