用于多选的html组合框或选择框-6ren

用于多选的html组合框或选择框

转载作者：搜寻专家更新时间：2023-10-31 22:31:09

enter image description here 我只是想知道以下表格的名称是什么？我从早上开始就在谷歌上搜索 HTML 表单列表，但我在任何地方都找不到这种表单。谁能告诉我这个表单的确切名称，它是否以 HTML 形式提供？

我只想在我的网站中添加这种形式。它可用于 HTML 还是我应该使用 JavaScript 还是仅限于 Windows 应用程序？有人可以帮帮我吗

最佳答案

对于多选组合框，可以使用multiple属性。

<select name="items" multiple>
<option value="">SELECT</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>

然后根据您的第一个屏幕截图，要将项目从一个组合添加到另一个组合，您应该使用一些 JavaScript。下面是完整的 html 代码。

<!DOCTYPE html>
<html>
<head>
    <title>List</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <style>
        select, input[type="text"] {
           width: 160px;
           box-sizing: border-box;
        }
        section {
           padding: 8px;
           background-color: #f0f0f0;
           overflow: auto;
        }
        section > div {
          float: left;
          padding: 4px;
        }
        section > div + div {
          width: 40px;
          text-align: center;
        }
        fieldset {
            padding:10px;margin-top:10px;
        }
    </style>
</head>
<body>

<section class="container">
    <div>
        <select id="leftValues" size="5" multiple>
             <option>1</option>
             <option>2</option>
             <option>3</option>
        </select>
        <!--div>
            <input type="text" id="txtLeft" />
        </div-->
    </div>
    <div>
        <input type="button" id="btnRight" value="&gt;&gt;" />
        <input type="button" id="btnLeft" value="&lt;&lt;" />
    </div>
    <div>
        <select id="rightValues" size="4" multiple>

        </select>
        <!--div>
            <input type="text" id="txtRight" />
        </div-->
    </div>
</section>


<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Descriptive Options</h4>
      </div>
      <div class="modal-body">
        <!-- Your content here -->
        <input type="checkbox" name="mean" checked> Mean
        <input type="checkbox" name="sum"> Sum
        <fieldset style="padding:10px;margin-top:10px;">
            <legend>Description</legend>
            <input type="checkbox" checked> Std. Deviation
            <input type="checkbox"> Minimum
        </fieldset>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Continue</button>
        <button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-success">Help</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script>

    $("#btnLeft").click(function () {
        var selectedItem = $("#rightValues option:selected");
        $("#leftValues").append(selectedItem);
    });

    $("#btnRight").click(function () {
        var selectedItem = $("#leftValues option:selected");
        $("#rightValues").append(selectedItem);
    });

    $("#rightValues").change(function () {
        //var selectedItem = $("#rightValues option:selected");
        //$("#txtRight").val(selectedItem.text());
    });
    $("#leftValues").change(function () {
        //var selectedItem = $("#leftValues option:selected");
        //$("#txtLeft").val(selectedItem.text());
        $('#myModal').modal('show');

    });
</script>
</body>
</html>