Question

我正在使用Materialise css框架为我的公司开发自定义Web应用程序。

所以有一点我必须使用optgroups显示一个包含一些按项目分组的任务的选择。每个项目都彼此不同，相关任务也是如此，但某些任务可能具有相同的名称（即使它们与数据库中的不同ID存储在一起）。

为了尽可能准确，假设我的项目“Project One”有一个任务'R＆amp; D'（id = 1）和一个任务'Developpement'（id = 2）。我的项目“Project Two”有一个任务“与客户会面”（id = 3）和一个任务'R＆amp; D'（id = 4）。

因此原始的html选择选择了正确的选项（id = 4），但选择的材料选择了第一个选项，选择了名称“R＆amp; d”......

<select id="selectId" name="SelectName">
    <option value="">Select Main task</option>
    <optgroup label="Project 1">
        <option value="420">Task Name 1</option>
        <option value="421">Task Name 2</option>
    </optgroup>
    <optgroup label="Project 3">
        <option value="2168">Task Name 7</option>
        <option value="2169" selected="selected">Task Name 2</option>
    </optgroup>
</select>

呈现

<div class="select-wrapper">
    <span class="caret">▼</span>
    <input type="text" class="select-dropdown" readonly="true" data-activates="select-options-75d04c8c-c252-a1ab-a84a-b5e81f275405" value="Task Name 2">
    <ul id="select-options-75d04c8c-c252-a1ab-a84a-b5e81f275405" class="dropdown-content select-dropdown"
        style="width: 250px; position: absolute; top: 0px; left: 0px; opacity: 1; display: none;">
        <li class=""><span>Select Main task</span></li>
        <li class="optgroup"><span>Project 1</span></li>
        <li class="optgroup-option "><span>Task Name 1</span></li>
        <li class="optgroup-option"><span>Task Name 2</span></li>
        <li class="optgroup"><span>Project 3</span></li>
        <li class="optgroup-option "><span>Task Name 7</span></li>
        <li class="optgroup-option "><span>Task Name 2</span></li>
    </ul>
    <select id="task_mainTaskQuote" name="task[mainTaskQuote]" required="required" class="initialized">
        <option value="">Select Main task</option>
        <optgroup label="Project 1">
            <option value="420">Task Name 1</option>
            <option value="421">Task Name 2</option>
        </optgroup>
        <optgroup label="Project 2">
            <option value="465">Task Name 3</option>
            <option value="466">Task Name 4</option>
            <option value="467">Task Name 5</option>
            <option value="2739">Task Name 6</option>
        </optgroup>
        <optgroup label="Project 3">
            <option value="2168">Task Name 7</option>
            <option value="2169" selected="selected">Task Name 2</option>
            <option value="2170">Task Name 8</option>
            <option value="2180">Task Name 9</option>
            <option value="2181">Task Name 10</option>
        </optgroup>
    </select>
</div>

这是关于它的jsFiddle：https://jsfiddle.net/h7vu2nb1/

关于我在这种情况下做错了什么或者我如何防止这种行为的任何暗示？

THX

Answer 1

这可能不是一个合适的解决方案，但是，通过在他们的Github上实现materialize forms.js文件，似乎初始化他们的select的javascript代码使用选项的名称，而不是它的值。所以你没有做错任何事，只是插件的工作方式不符合你的需要。但是关于你的问题，我无法为你提供更多帮助。

使用optgroups时，材质选择会显示错误选项

1 个答案: