选择 <optgroup> 多输入合 1 选择答案

【问题标题】：Select <optgroup> Multiple Input in 1 Select选择 <optgroup> 多输入合 1 选择
【发布时间】：2019-07-08 07:12:11
【问题描述】：

我有 2 个 foreach in 1 select 与不同的组。如果值是从第二个 optgroup 中选择的，我想将输入从 serviceid 更改为 domain id。

<select class="form-control select2" id="serviceid" name="serviceid" required>
   <option disabled selected value> -- Select -- </option>
   <optgroup label="Products">
       @foreach($services['product'] as $service)
           <option value="{{ $service['id'] }}">{{ $service['name'] }}</option>
       @endforeach  
   </optgroup>

   <optgroup label="Domains">
       @foreach($domains['domain'] as $domain)
           <option value="{{ $domain['id'] }}">{{ $domain['domainname'] }}</option>
       @endforeach  
   </optgroup>

</select>

现在输出总是带有"serviceid" => "2" 如果从标签 Domains 2nd 数组中选择了某些内容，我想要 "domainid" => "1"。

【问题讨论】：

你从哪里得到这个输出？请添加相关代码。
当用户点击提交按钮时

标签： php jquery laravel

【解决方案1】：

您可以对这两种情况使用隐藏输入，如下面所示的 sn-p，您可以在服务器端代码中使用非空输入进行过滤。

代码：

$('#serviceid').select2();

$('#serviceid').on('change', function() {
  var label = $('#serviceid :selected').parent().attr('label');

  if (label == "Domains") {
    $('.domainid').val($(this).val());
    $('.serviceid').val("");
  } else if (label == "Products") {
    $('.serviceid').val($(this).val());
    $('.domainid').val("");
  }

  console.log('domainid=' + $('.domainid').val());
  console.log('serviceid=' + $('.serviceid').val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>

<input type="hidden" name="domainid" class="domainid" />
<input type="hidden" name="serviceid" class="serviceid" />

<select class="form-control select2" id="serviceid" style="width: 300px">
  <option disabled selected value> -- Select -- </option>
  <optgroup label="Products">
    <option value="FEB">February</option>
    <option value="MAR">March</option>
    <option value="APR">April</option>
    <option value="MAY">May</option>
    <option value="JUN">June</option>
    <option value="JUL">July</option>
  </optgroup>

  <optgroup label="Domains">
    <option value="AUG">August</option>
    <option value="SEP">September</option>
    <option value="OCT">October</option>
    <option value="NOV">November</option>
    <option value="DEC">December</option>
  </optgroup>
</select>

【讨论】：