Jquery добавить только текущие выбранные значения для ввода

Question

Этот сценарий добавляет выбранное значение из каждого выбора под #todoslosmodelos к входу # 1471599855 Как я могу изменить его так, чтобы он добавлял только текущие выбранные значения?Это означает, что если я изменю выбранное значение на другое, тогда предыдущее выбранное значение будет удалено из ввода, чтобы оно всегда отражало только текущие выбранные значения из всех выборок в #todoslosmodelos?

var val = "";
var theval = $("#1471599855");

$("#todoslosmodelos select").change(function() {

  val = $(this).children("option:selected").val();
  if (val.length > 0) {
    //addVals = addVals + val1;
    theval.val(theval.val() + val + ", ");

  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset id="todoslosmodelos">
  <div class="form-group">
    <div class="checkbox" id="modeload-modelo-40"><input id="40" type="checkbox" value="40" />
      <div class="single-item">
        <div><label for="40"><img alt="" src="https://drive.google.com/uc?id=1v3Tg16LptDiUDK6tMoPZvpTaztiuJOqR" /></label></div>

        <div><label for="40"><img alt="" data-lazy="https://drive.google.com/uc?id=18vU7K4MMZylkuS3hPTz1vNLQfTZthi5j" src="null" /></label></div>

        <div><label for="40"><img alt="" data-lazy="https://drive.google.com/uc?id=1KSFpMlG5Nke_8q5D_MBzLnXzdGZLowru" src="null" /></label></div>

        <div><label for="40"><img alt="" data-lazy="https://drive.google.com/uc?id=1YmPzIQ7n2p5s7TavwhTTJVGR8RXegeKL" src="null" /></label></div>

        <div><label for="40"><img alt="" data-lazy="https://drive.google.com/uc?id=1G7eQhmSJpdRaV5HmVm-iVt8wXiloHqPO" src="null" /></label></div>
      </div>

      <div class="novisible" id="talles-modelo-40">
        <div class="select"><label for="hwA-qty-modelo-40">PARA SELECCIONAR TALLES PRIMERO MARC&Aacute; LA CANTIDAD DE PARES DE &quot;MODELO 40&quot;</label><br />
          <label>1 <input name="hwA-qty-modelo-40" type="radio" value="1" /></label> <label>2 <input name="hwA-qty-modelo-40" type="radio" value="2" /></label> <label>3 <input name="hwA-qty-modelo-40" type="radio" value="3" /></label></div>

        <fieldset class="fieldsetstalles" id="hwA-modelo-40-1">
          <div class="form-group">
            <select class="form-control talle">
              <option selected value="">-- Seleccione Talle --</option>
              <option value="35-modelo-40">35</option>
              <option value="36-modelo-40">36</option>
              <option value="37-modelo-40">37</option>
              <option value="38-modelo-40">38</option>
              <option value="39-modelo-40">39</option>
              <option value="40-modelo-40">40</option>
            </select>
          </div>
        </fieldset>

        <fieldset class="fieldsetstalles" id="hwA-modelo-40-2">
          <div class="form-group">
            <select class="form-control talle">
              <option selected value="">-- Seleccione Talle --</option>
              <option value="35-modelo-40">35</option>
              <option value="36-modelo-40">36</option>
              <option value="37-modelo-40">37</option>
              <option value="38-modelo-40">38</option>
              <option value="39-modelo-40">39</option>
              <option value="40-modelo-40">40</option>
            </select>
          </div>
        </fieldset>

        <fieldset class="fieldsetstalles" id="hwA-modelo-40-3">
          <div class="form-group">
            <select class="form-control talle">
              <option selected value="">-- Seleccione Talle --</option>
              <option value="35-modelo-40">35</option>
              <option value="36-modelo-40">36</option>
              <option value="37-modelo-40">37</option>
              <option value="38-modelo-40">38</option>
              <option value="39-modelo-40">39</option>
              <option value="40-modelo-40">40</option>
            </select>
          </div>
        </fieldset>
      </div>
    </div>

    <div class="checkbox" id="modeload-modelo-39"><input id="39" type="checkbox" value="39" />
      <div class="single-item">
        <div><label for="39"><img alt="" data-lazy="https://drive.google.com/uc?id=1rw9fI90Gp5z4gThKLVqMvaRWFUtpmAXD" src="null" /></label></div>

        <div><label for="39"><img alt="" data-lazy="https://drive.google.com/uc?id=1D3rZKrVPHwy40CVGWX2g62i6gJ8xU0r_" src="null" /></label></div>

        <div><label for="39"><img alt="" data-lazy="https://drive.google.com/uc?id=1Y16ldT1s7vy2892xUVmaZzSRVj1vTZYd" src="null" /></label></div>

        <div><label for="39"><img alt="" data-lazy="https://drive.google.com/uc?id=1UDAn49FofPAQDL93r0ruScgbXk4qUoQ0" src="null" /></label></div>

        <div><label for="39"><img alt="" data-lazy="https://drive.google.com/uc?id=1B7-M_ewJ3wUrrTTKH2covvCVxxkUOGUq" src="null" /></label></div>
      </div>

      <div class="novisible" id="talles-modelo-39">
        <div class="select"><label for="hwA-qty-modelo-39">PARA SELECCIONAR TALLES PRIMERO MARC&Aacute; LA CANTIDAD DE PARES DE &quot;MODELO 39&quot;</label><br />
          <label>1 <input name="hwA-qty-modelo-39" type="radio" value="1" /></label> <label>2 <input name="hwA-qty-modelo-39" type="radio" value="2" /></label> <label>3 <input name="hwA-qty-modelo-39" type="radio" value="3" /></label></div>

        <fieldset class="fieldsetstalles" id="hwA-modelo-39-1">
          <div class="form-group">
            <select class="form-control talle">
              <option selected value="">-- Seleccione Talle --</option>
              <option value="35-modelo-39">35</option>
              <option value="36-modelo-39">36</option>
              <option value="37-modelo-39">37</option>
              <option value="38-modelo-39">38</option>
              <option value="39-modelo-39">39</option>
              <option value="40-modelo-39">40</option>
            </select>
          </div>
        </fieldset>

        <fieldset class="fieldsetstalles" id="hwA-modelo-39-2">
          <div class="form-group">
            <select class="form-control talle">
              <option selected value="">-- Seleccione Talle --</option>
              <option value="35-modelo-39">35</option>
              <option value="36-modelo-39">36</option>
              <option value="37-modelo-39">37</option>
              <option value="38-modelo-39">38</option>
              <option value="39-modelo-39">39</option>
              <option value="40-modelo-39">40</option>
            </select>
          </div>
        </fieldset>

        <fieldset class="fieldsetstalles" id="hwA-modelo-39-3">
          <div class="form-group">
            <select class="form-control talle">
              <option selected value="">-- Seleccione Talle --</option>
              <option value="35-modelo-39">35</option>
              <option value="36-modelo-39">36</option>
              <option value="37-modelo-39">37</option>
              <option value="38-modelo-39">38</option>
              <option value="39-modelo-39">39</option>
              <option value="40-modelo-39">40</option>
            </select>
          </div>
        </fieldset>
      </div>
    </div>
  </div>
</fieldset>


<fieldset>
  <legend for="1471599855"><br /> MODELOS/TALLES SELECCIONADOS:<br />
    <span style="font-size: 11px;">muestra los Modelos/Talles que seleccionaste arriba.</span></legend>

  <div class="form-group"><input class="form-control" id="1471599855" name="entry.1471599855" readonly="readonly" type="text" /></div>
</fieldset>

FIDDLE, включая разметку здесь: http://jsfiddle.net/hejsz43y/2/

Answer 1

Вам необходимо отслеживать ранее выбранное значение и удалять его при изменении параметра.

var val = "";
var theval = $("#1471599855");

$("#todoslosmodelos select").change(function(){
  val = $.each($(this).children("option:selected"), ()=> {
  var before_change = $(this).data('pre');
  let value = $(this).val()
  if(value.length>0) {
    if(before_change && before_change.length>0) {
        theval.val(theval.val().replace(before_change + ", ", "") + value + ", ");
    } else {
    theval.val(theval.val() + value + ", ");
    } 
  }
  if(value.length==0){
    theval.val(theval.val().replace(before_change + ", ", "")); 
  }
  $(this).data('pre', $(this).val());
  });
  console.log(theval.val())
});

fiddle: http://jsfiddle.net/0ybfsLoj/

Answer 2

Полагаю, эта разметка и значения выбора останутся такими же, как вы показали в своем фрагменте кода.Ваш существующий скрипт извлекает все существующие данные из $ ("# 1471599855") и добавляет новые выбранные поля, не проверяя, были ли уже взяты значения из этого раскрывающегося списка.

Если бы я был вами, я бы сделал следующее:при каждом изменении выбора я бы выбрал выбранное значение и поместил его в «fieldsetstalles» с дополнительным атрибутом, а затем перебрал его, получил оттуда выбранные данные и поместил в поле ввода или просто, при каждом изменении выбора я выбрал последнее выбранноезначения и положить в поле ввода.

РЕДАКТИРОВАТЬ: Здесь я сохранил скрипку анонимно, я не уверен, что он покажет вам обновленный код для вас или нет.http://jsfiddle.net/3La6d4mj/

Я пытаюсь здесь воспользоваться более поздним решением, которое я упомянул.

var val = "";
var theval = $("#1471599855");

$("#todoslosmodelos select").change(function(){
var data = '';
  $(".fieldsetstalles select").each(function(){


    if( '' != $(this).children("option:selected").val() ) {
            data += $(this).children("option:selected").val() + ", ";
}
  });
  theval.val(data); 
});

Это должно быть то, что вам нужно, я думаю.