前端取得select下option的value,并打入hidden的input中

Question

想请教一个php前端输入数据库的问题，
一开始只是一个input，输入数据库时是文字串的形式，例如:

<ul class="marginList">
              <li class="section">
                <label>
                  <span class="inputType">时间1</span>
                  <input type="text" maxlength="64" " name="shop_open" id="shop_open" class="middle alphabet maru rome mini" required="required" value="{{ old('shop_open', $appPayMerchant->open_time) }}" />
                </label>
              </li>
              <li class="section">
                <label>
                  <span class="inputType">时间2</span>
                  <input type="text" maxlength="64"  name="shop_close" id="shop_close" class="middle alphabet maru rome mini" required="required" value="{{ old('shop_close', $appPayMerchant->regular_holiday) }}" />
                </label>
              </li>
            </ul>

名为shop_open和shop_close都为文字串类型传入数据库，不过在数据库的项目类型完全不变的情况下，接下尝试来把两个input换成select并尝试js衔接option成为文字串

<div class="formBox">
        <div class="inner{{ $errors->hasAny('shop_open', 'shop_close') ? ' error' : '' }}">
          <div class="answerBox section">
            <div class="section">
              <div class="subTitle">
                <h3>工作日</h3>
              </div>
              @php ($startTime = \Carbon\Carbon::createFromTime('00', '00'))
              @php ($endTime = \Carbon\Carbon::createFromTime('24', '00'))
              <div data-role="fieldcontain" class="section">
                <label for="business_open_time">
                  <span class="inputType">开始</span>
                </label>
                <select name="business_open_time" id="business_open_time" data-inline="true" required>
                  <option value="">开始选择</option>
                  @while ($startTime->diffInMinutes($endTime))
                    <option value="{{ $startTime->format('G:i') }}"{{ (!empty(old('business_open_time', $merchant->open_time)) && old('business_open_time', $merchant->open_time) == $startTime->format('G:i')) ? ' selected="selected"' : '' }}>{{ $startTime->format('G:i') }}</option>
                    @php ($startTime->addMinutes(30))
                  @endwhile
                </select>
              </div>
              <div data-role="fieldcontain" class="section">
                <label for="business_finish_time">
                  <span class="inputType">关闭</span>
                </label>
                <select name="business_finish_time" id="business_finish_time" data-inline="true" required >
                  <option value="">关闭选择</option>
                  @php ($startTime = \Carbon\Carbon::createFromTime('00', '00'))
                  @while ($startTime->diffInMinutes($endTime))
                    <option value="{{ $startTime->format('G:i') }}"{{ (!empty(old('business_finish_time', $merchant->close_time)) && old('business_finish_time', $merchant->close_time) == $startTime->format('G:i')) ? ' selected="selected"' : '' }}>{{ $startTime->format('G:i') }}</option>
                    @php ($startTime->addMinutes(30))
                  @endwhile
                </select>
              </div>
              <div class="subTitle">
                <h3>节假日</h3>
              </div>
              @php ($startTime = \Carbon\Carbon::createFromTime('00', '00'))
              @php ($endTime = \Carbon\Carbon::createFromTime('24', '00'))
              <div data-role="fieldcontain" class="section">
                <label for="business_open_time">
                  <span class="inputType">开始</span>
                </label>
                <select name="business_open_time1" id="business_open_time1" data-inline="true" required>
                  <option value="">开始选择</option>
                  @while ($startTime->diffInMinutes($endTime))
                    <option value="{{ $startTime->format('G:i') }}"{{ (!empty(old('business_open_time', $merchant->open_time)) && old('business_open_time', $merchant->open_time) == $startTime->format('G:i')) ? ' selected="selected"' : '' }}>{{ $startTime->format('G:i') }}</option>
                    @php ($startTime->addMinutes(30))
                  @endwhile
                </select>
              </div>
              <div data-role="fieldcontain" class="section">
                <label for="business_finish_time">
                  <span class="inputType">结束</span>
                </label>
                <select name="business_finish_time1" id="business_finish_time1" data-inline="true" required >
                  <option value="">结束选择</option>
                  @php ($startTime = \Carbon\Carbon::createFromTime('00', '00'))
                  @while ($startTime->diffInMinutes($endTime))
                    <option value="{{ $startTime->format('G:i') }}"{{ (!empty(old('business_finish_time', $merchant->close_time)) && old('business_finish_time', $merchant->close_time) == $startTime->format('G:i')) ? ' selected="selected"' : '' }}>{{ $startTime->format('G:i') }}</option>
                    @php ($startTime->addMinutes(30))
                  @endwhile
                </select>
              </div>
          </div>
        </div>
      </div>

请问在这种情况下设置两个hidden input , name,id依然为shop_open和shop_close, 然后衔接字符串和name="business_open_time"和"business_close_time"是否可行

business_open_time.onchange = business_finish_time.onchange = business_open_time1.onchange = business_finish_time1.onchange = function () {
    shop_open.value = '工作日' + business_open_time.value + '~' + business_finish_time.value + ' / ' + '节假日'  + business_open_time1 + '~' + business_finish_time
    alert(shop_open.value)
  }

shop_close也同上的感觉， 但是有一个问题，这样会被validation挡住被看作为未输入，是不是js的问题

而且好像也没有传递成功

还请指教改正，非常感谢 ~!!

Answer 1

shop_open和shop_close这2个id的hidden控件题主没放到表单中？没看到有对应的html代码，这样会出错。而且获取值需要调用value属性，直接链接dom对象得到默认的toString返回值[object HTMLSelectElement]，节假日后面的2个字符串连接要获取dom的value属性

<div class="formBox">
    <div class="inner{{ $errors->hasAny('shop_open', 'shop_close') ? ' error' : '' }}">
        <div class="answerBox section">
            <div class="section">
                <div class="subTitle">
                    <h3>工作日</h3>
                </div>
                @php ($startTime = \Carbon\Carbon::createFromTime('00', '00'))
                @php ($endTime = \Carbon\Carbon::createFromTime('24', '00'))
                <div data-role="fieldcontain" class="section">
                    <label for="business_open_time">
                        <span class="inputType">开始</span>
                    </label>
                    <select name="business_open_time" id="business_open_time" data-inline="true" required>
                        <option value="">开始选择</option>
                        @while ($startTime->diffInMinutes($endTime))
                        <option value="{{ $startTime->format('G:i') }}" {{ (!empty(old('business_open_time', $merchant->open_time)) && old('business_open_time', $merchant->open_time) == $startTime->format('G:i')) ? ' selected="selected"' : '' }}>{{ $startTime->format('G:i') }}</option>
                        @php ($startTime->addMinutes(30))
                        @endwhile
                    </select>
                </div>
                <div data-role="fieldcontain" class="section">
                    <label for="business_finish_time">
                        <span class="inputType">关闭</span>
                    </label>
                    <select name="business_finish_time" id="business_finish_time" data-inline="true" required>
                        <option value="">关闭选择</option>
                        @php ($startTime = \Carbon\Carbon::createFromTime('00', '00'))
                        @while ($startTime->diffInMinutes($endTime))
                        <option value="{{ $startTime->format('G:i') }}" {{ (!empty(old('business_finish_time', $merchant->close_time)) && old('business_finish_time', $merchant->close_time) == $startTime->format('G:i')) ? ' selected="selected"' : '' }}>{{ $startTime->format('G:i') }}</option>
                        @php ($startTime->addMinutes(30))
                        @endwhile
                    </select>
                </div>
                <div class="subTitle">
                    <h3>节假日</h3>
                </div>
                @php ($startTime = \Carbon\Carbon::createFromTime('00', '00'))
                @php ($endTime = \Carbon\Carbon::createFromTime('24', '00'))
                <div data-role="fieldcontain" class="section">
                    <label for="business_open_time1">
                        <span class="inputType">开始</span>
                    </label>
                    <select name="business_open_time1" id="business_open_time1" data-inline="true" required>
                        <option value="">开始选择</option>
                        @while ($startTime->diffInMinutes($endTime))
                        <option value="{{ $startTime->format('G:i') }}" {{ (!empty(old('business_open_time', $merchant->open_time)) && old('business_open_time', $merchant->open_time) == $startTime->format('G:i')) ? ' selected="selected"' : '' }}>{{ $startTime->format('G:i') }}</option>
                        @php ($startTime->addMinutes(30))
                        @endwhile
                    </select>
                </div>
                <div data-role="fieldcontain" class="section">
                    <label for="business_finish_time">
                        <span class="inputType">结束</span>
                    </label>
                    <select name="business_finish_time1" id="business_finish_time1" data-inline="true" required>
                        <option value="">结束选择</option>
                        @php ($startTime = \Carbon\Carbon::createFromTime('00', '00'))
                        @while ($startTime->diffInMinutes($endTime))
                        <option value="{{ $startTime->format('G:i') }}" {{ (!empty(old('business_finish_time', $merchant->close_time)) && old('business_finish_time', $merchant->close_time) == $startTime->format('G:i')) ? ' selected="selected"' : '' }}>{{ $startTime->format('G:i') }}</option>
                        @php ($startTime->addMinutes(30))
                        @endwhile
                    </select>
                </div>
            </div>
        </div>
    </div>
    <!--添加hidden控件-->
    <input type="hidden" name="shop_open" id="shop_open" />
    <input type="hidden" name="shop_close" id="shop_close" />

    <script>

        business_open_time.onchange = business_finish_time.onchange = business_open_time1.onchange = business_finish_time1.onchange = function () {
            shop_open.value = '工作日' + business_open_time.value + '~' + business_finish_time.value + ' / ' + '节假日' + business_open_time1.value + '~' + business_finish_time.value
            alert(shop_open.value)

            //shop_close的字符串连接逻辑代码。。
        }
    </script>