Question

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

<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

单独使用HTML无法做到这一点，您需要使用其他技术来帮助您实现这一目标。

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

如果选择服务器端方法，则可以将公共选项分配给变量，并为共享这些值的选择框执行for（每个）循环。

例如，在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>

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

2 个答案: