根据输入中的所有值选择选项 [英] select option based on all values in an input

问题描述

我有一个简单的预订表格.在这种形式中，我有两个输入框，并根据隐藏在类名"rooms"中的输入值来更改每个房间的数量，此外还有另一个显示

I have a simple reservation form. In this form, I have two input box and I change number of each room based on value of input hidden with class name "rooms", moreover there is another input that shows

数字是这样的:1，8 * 1，11

numbers like this: 1 ,8*1 ,11

第一位数字代表人数，逗号后的第二位数字代表该人在第一房间的年龄.

the first digit shows a count of person and the second digit after comma shows the age of that person in the first room.

我分开了第一和第二个房间，中间有一个星星.星号后面的数字也显示第二个房间中每个人的人数和年龄.

I separated first and second rooms with a star between them. the digits after star shows count and age of each person in the second room as well.

我的问题是如何使用这些数字选择我的选择框?

my question is how can I use these digits for selecting my select boxes?

例如，我想使用第一位数字作为选择框子级.如果那个数字是1.我会为我的孩子在第一个房间选择1.还有我第一个房间等第一个孩子的年龄的第二个数字.

for example, I want to use the first digit for select box child. if that number was 1. i would choose 1 in first room for my child . also second number for age of first child in my first room and etc.

我用函数fillchild编写了以下代码，但它不起作用.

I wrote the below code with function fillchild but it does not work .

这是我的摘录:

$(document).ready(function() {
  $('#rooms').val($('.rooms').val());
  $('#rooms').change()
})

$("#rooms").change(function() {

  countRoom = $(this).val();

  $(".numberTravelers").empty()
  for (i = 1; i <= countRoom; i++) {
    $(".numberTravelers").css("width", "100%").append('<div class="countRoom"><div class="numberOfRooms">room' + i + '</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>')

  }
});

function childAge(a) {
  $(a).each(function() {
    age = $(a).val();

    $(a).closest(".countRoom").find(".selectAge").empty();
    for (var j = 1; j <= age; j++) {
      $(a).closest(".countRoom").css("width", "100%").find(".selectAge").append('<div class="age"><label>child age' + j + '</label><select name="childage" class="childage form-control"><option value="1">till 1 year</option><option value="2">1-2 year</option><option value="3">2-3 year</option><option value="4">3-4 year</option></select></div>');
    }
    fillchild();
  });
}

function fillchild() {
  var childCounts = $('.childage').val().split(',');
  var ageCounts = $('.childage').val().split('*');
  childCounts.forEach((childage, index) => {
    var selectname = '_root.rooms__' + (index + 1) + '.childcountandage';
    var selectElement = $('input[name="' + selectname + '"]');
    if (selectElement.length > 0) {
      $(selectElement).val(childage);
    }

  })
}

.numberOfRooms {
  border: 1px solid red;
}

.childage {
  background: #ccc;
}

<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="text" class="childage" value="1 ,8*1 ,11" readonly />
  <div class="col-xs-4">
    <span class="itemlable">rooms: </span>
    <select name="rooms" id="rooms">
    <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">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>

推荐答案

我使它具有动态性，因此它仍然适用于2个3岁和4岁的孩子.您可以在下面看到该示例.

I have made it dynamic so that it still works for 2 child with age 3 and 4. You can see that example below.

$(document).ready(function() {
  $('#rooms').val($('.rooms').val());
  $('#rooms').change()
})

$("#rooms").change(function() {

  countRoom = $(this).val();

  $(".numberTravelers").empty()
  for (i = 1; i <= countRoom; i++) {
    $(".numberTravelers").css("width", "100%").append('<div class="countRoom"><div class="numberOfRooms">room' + i + '</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>')

  }
  fillchild();
});

var ageGlobal ='';
function childAge(a) {
  $(a).each(function() {
    age = $(a).val();
    ageGlobal = ageGlobal.split(',');
    $(a).closest(".countRoom").find(".selectAge").empty();
    for (var j = 1; j <= age; j++) {
      $(a).closest(".countRoom").css("width", "100%").find(".selectAge").append('<div class="age"><label>child age' + j + '</label><select name="childage" class="childage form-control"><option value="1">till 1 year</option><option value="2">1-2 year</option><option value="3">2-3 year</option><option value="4">3-4 year</option></select></div>');
      var ageVal = ageGlobal[j-1] || "1";
      //set the value of age dropdown
      $(a).closest(".countRoom")
      .find("select[name='childage']:eq("+(j-1)+")")
      .val(ageVal);
    }
  });
  //reset ageGlobal so that it works when child is changed
  ageGlobal = "1";
}

function fillchild() {
  var roomChildAge = $('.childage').val().split('*');
  roomChildAge.forEach((childAge, index) => {
   //find the child dropdown for the room
    var childElement = $($('.countRoom')[index]).find('.childcount');
    //element for child exist
    if (childElement.length > 0) {
      //get the child and age values using substring
      var childCount;
      //when there is no child and its age
      if(childAge.trim()==="0"){
         childCount = "0";  
         ageGlobal ='';
      }else{
         childCount = childAge.substring(0, childAge.indexOf(','));
         ageGlobal = childAge.substring(childAge.indexOf(',')+1, childAge.length);
      }
      $(childElement).val(childCount.trim());
      //trigger change eveny so that age select box is pre-selected
      $(childElement).trigger('change');
    }

  })
}

.numberOfRooms {
  border: 1px solid red;
}

.childage {
  background: #ccc;
}

<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="text" class="childage" value="2 ,3,4*0" readonly />
  <div class="col-xs-4">
    <span class="itemlable">rooms: </span>
    <select name="rooms" id="rooms">
    <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">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>

这篇关于根据输入中的所有值选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！