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

您没有获得选择标记的值，请使用.val()来选择当前值

代替这个

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

将其更改为此

$('.option').val()

如何在jQuery中的多个选择之间获取最后一个选项值

2 个答案: