多个 select 可以像一组收音机一样工作

Question

我只需要 select 一个组内的 1 个选项。我使用了多个-select.js

我应该可以点击

A1 或 A2 或 A3

和

B1 或 B2 或 B3

我也尝试过 - 认为它可以在单击新按钮时取消select 以前的按钮，只要所有按钮都具有相同的名称但徒劳无功。

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      
      <script src="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.min.js"></script>
      
          <link href="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.css" rel="stylesheet"/>
        
        
    </head>
    <body>
        <select multiple="multiple">
            <optgroup label="Group A">
                <option value="1">Radio A1</option>
                <option value="2">Radio A2</option>
                <option value="3">Radio A3</option>            
            </optgroup>
            <optgroup label="Group B">
                <option value="4">Radio B1</option>
                <option value="5">Radio B2</option>
                <option value="6">Radio B3</option>   
            </optgroup>
        </select>
        <script>
            $('select').multipleSelect(
            {
                multiple: true,
                multipleWidth: 300,
            selectAll: false,
                width: '100%',
                
                onClick: function(view) {
                    //;
                }            
            }
            
            );
        </script>
    </body>

Answer 1

通常，multiple-select 插件不支持您在单个 select.However 中每个选项组中只能选择一个选项的所需行为 select.However，您只能在单个选项中选择一个选项 select 没有 optgroup.

因此您可以使用 2 "single row" select 来完成您想要的功能。

PS: 我试过自定义multiple-select行为，让你可以在一个optgroup中只选择一个单选按钮，但是插件不够灵活。

<html>

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.css" />
</head>

<body>
    <fieldset>
        <legend>Choose Group A and B</legend>
        <label>Group A</label>
        <select multiple="multiple">
            <option value="1">Radio A1</option>
            <option value="2">Radio A2</option>
            <option value="3">Radio A3</option>
        </select>

        <label>Group B</label>
        <select multiple="multiple">
            <option value="4">Radio B1</option>
            <option value="5">Radio B2</option>
            <option value="6">Radio B3</option>
        </select>
    </fieldset>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.min.js"></script>
    <script>
        $('select').multipleSelect({
            multiple: true,
            multipleWidth: 300,
            selectAll: false,
            width: '100%',
            single: true,
            onClick: function (view) {
                /*
                view.label: the text of the checkbox item
                view.checked: the checked of the checkbox item
                */
                //Uncheck other checkboxes in the group
            },
            onOptgroupClick: function (view) {
                /*
                view.label: the text of the optgroup
                view.checked: the checked of the optgroup
                view.children: an array of the checkboxes (DOM elements) inside the optgroup
                */
            }
        });
    </script>
</body>

</html>

希望对您有所帮助。

为了space的形式，使用bootstrap行内形式：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Multiple select to function like radio in a group</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>

    </style>
</head>

<body>
    <div class="container">
        <form class="form-inline">
            <fieldset>
                <legend>Choose Group A and B</legend>
                <label>Group A </label>
                <select class="form-control">
                    <option value="1">Radio A1</option>
                    <option value="2">Radio A2</option>
                    <option value="3">Radio A3</option>
                </select>

                <label>Group B </label>
                <select class="form-control">
                    <option value="4">Radio B1</option>
                    <option value="5">Radio B2</option>
                    <option value="6">Radio B3</option>
                </select>
            </fieldset>

        </form>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

</html>

多个 select 可以像一组收音机一样工作

Multiple select to function like radio in a group

html

javascript

jquery

multiple-select