基于adultcount输入值设置预订表单房间成人下拉选项

我明白你的需求啦——要把.adultcount隐藏框里的逗号分隔值，对应到每个房间的成人下拉选择框上，不管是初始加载还是房间数量变化的时候都要生效。咱们来修改你的代码，一步步实现：

核心思路 #

• 解析.adultcount的值为数字数组，方便按房间索引取值
• 页面初始化时，除了同步房间数量，还要给初始房间设置对应的成人数量
• 生成新房间的成人选择框时，根据数组对应位置的值设置选中项；如果数组长度不够，默认选中1

修改后的完整代码 #

<style>
.numberOfRooms { border:1px solid red; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="researchii">
  <input type="hidden" class="rooms" value="2"/>
  <input type="hidden" class="adultcount" value="2,1"/>
  <div class="col-xs-4">
    <span class="itemlable">roomcount: </span>
    <select name="rooms" id="roomcount">
      <option value="1" class="btn2"> 1 </option>
      <option value="2" class="btn2"> 2 </option>
    </select>
  </div>
  <div class="numberTravelers">
    <div class="countRoom">
      <div class="col-xs-4">
        <span class="itemlable">adults: </span>
        <select name="_root.rooms__1.adultcount">
          <option value="1"> 1 </option>
          <option value="2"> 2 </option>
        </select>
      </div>
      <div class="col-xs-4">
        <span class="itemlable">child</span>
        <select name="childcount" class="childcount" onChange="childAge(this)">
          <option value="0"> 0 </option>
          <option value="1"> 1 </option>
          <option value="2"> 2 </option>
        </select>
      </div>
      <div class="selectAge col-xs-4"></div>
      <input type="hidden" name="_root.rooms__1.childcountandage" class="childcountandage"/>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
  // 解析成人数量为数字数组，方便按房间索引取值
  const adultCounts = $('.adultcount').val().split(',').map(val => parseInt(val, 10));
  
  // 初始化房间数量
  $('#roomcount').val($('.rooms').val());
  // 给页面初始存在的房间设置成人数量
  setInitialRoomAdultCounts();
  // 触发房间数量变化事件，生成对应数量的房间
  $('#roomcount').change();
})

$("#roomcount").change(function(){
  const countRoom = $(this).val();
  $(".numberTravelers").empty();
  
  for(let i=1;i<=countRoom;i++){
    // 获取当前房间对应的成人数量，数组长度不足时默认选1
    const targetAdultVal = adultCounts[i-1] || 1;
    // 生成房间HTML，给对应成人选项添加选中属性
    const roomHtml = `
      <div class="countRoom">
        <div class="numberOfRooms">room${i}</div>
        <div class="col-xs-4">
          adults
          <select name="_root.rooms__${i}.adultcount">
            <option value="1" ${targetAdultVal === 1 ? 'selected' : ''}>1</option>
            <option value="2" ${targetAdultVal === 2 ? 'selected' : ''}>2</option>
          </select>
        </div>
        <div class="col-xs-4">
          child
          <select name="childcount" class="childcount" onchange="childAge(this)">
            <option value="0"> 0 </option>
            <option value="1"> 1 </option>
            <option value="2"> 2 </option>
          </select>
        </div>
        <div class="selectAge col-xs-4"></div>
        <input type="hidden" name="_root.rooms__${i}.childcountandage" class="childcountandage"/>
      </div>
    `;
    $(".numberTravelers").css("width","100%").append(roomHtml);
  }
});

// 处理页面初始加载时已存在的房间成人数量
function setInitialRoomAdultCounts() {
  $('.countRoom').each(function(index) {
    const targetVal = adultCounts[index] || 1;
    $(this).find('select[name^="_root.rooms__"]').val(targetVal);
  });
}

// 保留你原有的childAge逻辑（如果需要）
function childAge(el) {
  // 这里写你原有的年龄选择逻辑
}
</script>

关键细节说明 #

1. 数组解析：用split(',')把逗号分隔的字符串拆成数组，再转成数字类型，这样就能通过房间序号-1的索引直接取值（因为房间从1开始计数，数组从0开始）。
2. 初始房间处理：页面加载时调用setInitialRoomAdultCounts()，给已经存在的第一个房间设置对应成人数量，避免初始状态和隐藏框值不一致。
3. 动态生成时的选中逻辑：在拼接HTML字符串时，通过三元判断给对应value的option添加selected属性；如果隐藏框的数组长度小于当前房间数，就默认选中1，保证每个下拉框都有选中项。

这样不管是页面首次加载，还是用户调整房间数量，每个房间的成人选择框都会自动匹配.adultcount里的对应值啦。

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