HTML内的多选框排版问题

js在选取option下拉框id=day的项目，触发显示新的下拉多选框，多选框在整个父元素div之中无法得到期待的效果

尝试了在div父元素中的select直接赋予mutiple或者是添加div和ul元素链接js mouseleave等等函数表现都有问题。

在触发事件后跳出下方select起初时空白(类似下图)，

在点击select的时候只能显示其中一个"option"而其他的option貌似在浏览器中有溢出?overflow无法跳出其他的多选选项，

当前部分关系代码如下:

<div data-role="fieldcontain" class="section">
                <label for="shop_close">
                  <span class="inputType">文字</span>
                </label>
                <select name="shop_close" id="shop_close" data-inline="true" required onchange="spMul.style.display=this.options[this.selectedIndex].id=='day'?'':'none'">
                  <option>文字</option>
                  <option {{old('shop_close', $appPayMerchant->regular_holiday) == "文字" ? " selected" : ""}}>文字</option>
                  <option {{old('shop_close', $appPayMerchant->regular_holiday) == "文字" ? " selected" : ""}}>文字</option>
                  <option {{old('shop_close', $appPayMerchant->regular_holiday) == "文字" ? " selected" : ""}}>文字</option>
                  <option {{old('shop_close', $appPayMerchant->regular_holiday) == "文字" ? " selected" : ""}}>年末年始</option>
                  <option id="day" {{old('shop_close', $appPayMerchant->regular_holiday) == "文字" ? " selected" : ""}}>文字</option>
                  <option id="day" {{old('shop_close', $appPayMerchant->regular_holiday) == "文字" ? " selected" : ""}}>文字</option>
                  <option id="day" {{old('shop_close', $appPayMerchant->regular_holiday) == "文字" ? " selected" : ""}}>文字</option>
                  <option id="day" {{old('shop_close', $appPayMerchant->regular_holiday) == "文字" ? " selected" : ""}}>文字</option>
                  <option id="day" {{old('shop_close', $appPayMerchant->regular_holiday) == "文字" ? " selected" : ""}}>文字</option>
                  <option id="day" {{old('shop_close', $appPayMerchant->regular_holiday) == "文字" ? " selected" : ""}}>文字</option>
                </select>
                @if ($errors->has('shop_close'))
                  @foreach ($errors->get('shop_close') as $error)
                    <p class="errorMessage">{{ $error }}</p>
                  @endforeach
                @endif
              </div>
              <span id="spMul" style="display:none;">
                <div data-role="fieldcontain" class="section">
                  <label>
                    <span class="inputType">文字</span>
                  </label>
                  <select data-line="true" multiple="true">
                    <option>文字</option><option>文字</option><option>文字</option>
                    <option>文字</option><option>文字</option><option>文字</option><option>文字</option>
                  </select>
                </div>
              </span>

还请指教在此情况下如何调出有效的多选框，非常感谢!!

示例代码直接贴html文件中浏览跑没问题。可能样式有冲突什么的

问题可能出在了红色区域的js部分，可能是在触发事件后无法正确获取对应的元素导致无法正常显示。

推荐检查一下spMul的定义是否正确，是否正确获取了对应的元素，并且确保该元素已经正确渲染。

如果是多个多选框，可以尝试分别给每个多选框赋予不同的id来进行调用，并在触发事件中进行对应的判断。

另外，可以使用调试工具来检查事件是否正确触发和获取的元素是否正确。

• 这篇文章：HTMl排版标签 也许能够解决你的问题，你可以看下

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632