Как получить значение последней опции между несколькими выборами в jQuery

Question

У меня проблема с получением последнего выбранного значения опции в нескольких полях выбора, проблема в том, что у меня есть 4 поля выбора, которые вы видите на изображении ниже.Я хочу получить последнее значение параметра через jquery.

Я пробовал этот код, но не получил последнее точное значение.

$('.option').find('option:selected').attr("name")

Это моя форма.

<form method="post" id="form-id">
<div class="form-group">
    <label>Size</label>
    <select class="form-control option" name="size" required>
        <option value="">Choose option</option>
        <option>8.2 * 11.6 in (A4)</option>
        <option>11.7 x 16.5 in (A3)</option>
        <option>16.5 x 23.4 in (A2)</option>
        <option>23.4 x 33.1 in (A1)</option>
        <option>33.1 x 46.8 in (A0)</option>
    </select>
</div>
<div class="form-group">
    <label>Paper</label>
    <select class="form-control option" name="paper" required>
        <option value="">Choose option</option>
        <option>A4</option>
        <option>A3</option>
        <option>A2</option>
        <option>A1</option>
        <option>A0</option>
    </select>
</div>
<div class="form-group">
    <label>Appearance</label>
    <select class="form-control option" name="appearance" required>
        <option value="">Choose option</option>
        <option>Black & White</option>
        <option>Color</option>
        <option>Color Division</option>
    </select>
</div>

<div class="form-group">
    <label>Large Format Binding</label>
    <select class="form-control option" name="binding" required>
        <option value="">Choose Option</option>
        <option>No Binding</option>
        <option>Blk Edge w/ Craft Paper (<span class="amount">&#36;3.50</span>)</option>
        <option>Blk Edge w/o Craft Paper (<span class="amount">&#36;2.00</span>)</option>
        <option>Full Bind and Label (<span class="amount">&#36;4.00</span>)</option>
        <option>Post Bind &#8211; Drilled Holes w/ Screw Post (<span class="amount">&#36;5.00</span>)</option>
        <option>Post Bind w/ Black Edge (<span class="amount">&#36;6.00</span>)</option>
    </select>
</div>
<button type="submit" class="btn btn-success cart" style="display:none"><i class="fas fa-shopping-cart"></i> Add to Cart</button>

А это мой сценарий

<script>
$('.option').change(function () {

    var check = $(this).val();

    var name = $(this).attr("name");

    if($('[name=paper]').val() == '' || $('[name=size]').val() == '' || $('[name=appearance]').val() == '' || $('[name=binding]').val() == '')
    {
        if(name == 'size')
        {
            if(check == '')
            {
                $('#size').html('<font color=red> Please select a size </font>');
                $('.cart').hide();
            }
            $('#size').html(check);
        }
        else if(name == 'paper')
        {
            if(check == '')
            {
                $('#paper').html('<font color=red> Please select a paper </font>');
                $('.cart').hide();
            }
            $('#paper').html(check);
        }
        else if(name == 'appearance')
        {
            if(check == '')
            {
                $('#appearance').html('<font color=red> Please select appearance </font>');
                $('.cart').hide();
            }
            $('#appearance').html(check);
        }
        else if(name == 'binding')
        {
            if(check == '')
            {
                $('#binding').html('<font color=red> Please select a binding </font>');
                $('.cart').hide();
            }
            $('#binding').html(check);
        }
    }
    else
    {
        console.log($('.option').val());
        $('.cart').show();
        return false;
    }
});

</script>

Answer 1

Я хочу получить последнее значение параметра через jquery.

Так что это последний выбор пользователя, а не последний <select>, сделавший выбор ...
(Ответ отредактирован на основе комментариев) .
Поэтому я предполагаю, что вы просто хотите, чтобы $(this).val() был зарегистрирован в консоли.

Я изменил кнопку отправки, показав / скрыв ... Но яне понял, где вы хотели показать некоторые дополнительные подсказки ... Так что я пропустил это.

Я думаю, что это хороший стартер ... Приятного кодирования!

$('.option').on('change',function () {

  $('.option').each(function(){ // To show the submit button ONLY if all 4 dropdowns hold not empty value.
    $('.cart').show();
    if($(this).val() == ""){
      $('.cart').hide();
    }
  });
  
  var this_change = $(this).val();
  if(this_change == ""){
    this_change = 'User selected the default "Choose option"';
  }
  console.log(this_change);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form method="post" id="form-id">
<div class="form-group">
  <label>Size</label>
  <select class="form-control option" name="size" required>
    <option value="">Choose option</option>
    <option>8.2 * 11.6 in (A4)</option>
    <option>11.7 x 16.5 in (A3)</option>
    <option>16.5 x 23.4 in (A2)</option>
    <option>23.4 x 33.1 in (A1)</option>
    <option>33.1 x 46.8 in (A0)</option>
  </select>
</div>
<div class="form-group">
  <label>Paper</label>
  <select class="form-control option" name="paper" required>
    <option value="">Choose option</option>
    <option>A4</option>
    <option>A3</option>
    <option>A2</option>
    <option>A1</option>
    <option>A0</option>
  </select>
</div>
<div class="form-group">
  <label>Appearance</label>
  <select class="form-control option" name="appearance" required>
    <option value="">Choose option</option>
    <option>Black & White</option>
    <option>Color</option>
    <option>Color Division</option>
  </select>
</div>

<div class="form-group">
  <label>Large Format Binding</label>
  <select class="form-control option" name="binding" required>
    <option value="">Choose Option</option>
    <option>No Binding</option>
    <option>Blk Edge w/ Craft Paper (<span class="amount">&#36;3.50</span>)</option>
    <option>Blk Edge w/o Craft Paper (<span class="amount">&#36;2.00</span>)</option>
    <option>Full Bind and Label (<span class="amount">&#36;4.00</span>)</option>
    <option>Post Bind &#8211; Drilled Holes w/ Screw Post (<span class="amount">&#36;5.00</span>)</option>
    <option>Post Bind w/ Black Edge (<span class="amount">&#36;6.00</span>)</option>
  </select>
</div>
<button type="submit" class="btn btn-success cart" style="display:none"><i class="fas fa-shopping-cart"></i> Add to Cart</button>

Answer 2

Вы не получаете значение тега select, используйте .val(), чтобы получить текущее выбранное значение

Вместо этого

$('.option').find('option:selected').attr("name")

Измените его на

$('.option').val()