具有相同选项的多个 select 类别

Question

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

<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 的新手，我尝试在线搜索解决方案但找不到任何东西...感谢您的帮助！

Answer 1

您可以使用 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> 设置名称。

Answer 2

仅靠 HTML 无法做到这一点，您需要另一种技术来帮助您做到这一点。

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

如果您选择服务器端方法，那么您可以将通用选项分配给一个变量，并为共享这些值的 select 个框执行 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>

具有相同选项的多个 select 类别

Multiple select category with same options

html

html-select

drop-down-menu