选择下拉框店铺后自动在文本框显示对应营业状态的实现求助

第一步：修改店铺下拉选项的HTML结构 #

首先需要把每个店铺的营业状态提前存入下拉选项的自定义属性中，同时给下拉框添加唯一ID方便后续事件绑定，修改你的下拉框渲染代码：

<select class="form-control" name="nameofshop" id="shopSelect" required>
  <option value="">No Selected</option>
  <?php foreach($category as $row):?>
  <!-- 新增data-status属性存储店铺对应状态，替换$row->shopStatus为你实际的状态字段名 -->
  <option value="<?php echo $row->shopName;?>" data-status="<?php echo $row->shopStatus;?>">
    <?php echo $row->shopName;?>
  </option>
  <?php endforeach;?>
</select>

第二步：添加JS事件监听实现状态自动填充 #

你使用了Bootstrap的模态框组件，默认已经引入了jQuery，直接添加如下代码即可实现选择店铺后自动勾选对应状态：

$(function() {
  // 监听店铺下拉框的选择变化事件
  $('#shopSelect').on('change', function() {
    // 获取选中店铺的状态值，统一转小写匹配单选框的value
    const selectedStatus = $(this).find('option:selected').data('status')?.toLowerCase() || ''
    // 先重置所有单选框的选中状态
    $('input[name="status"]').prop('checked', false)
    // 匹配到对应状态就自动勾选
    if (selectedStatus) {
      $(`input[name="status"][value="${selectedStatus}"]`).prop('checked', true)
    }
  })
})

内容的提问来源于stack exchange，提问作者Ulquiorra Schiffer