HTML内的多选框排版问题

Question

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>

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

Answer 1

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