Question

我想每次<option>更改时都更改多个输入值，但是if语句仅计算第一个条件并将值更改为'200'和'300'；它不会评估其他条件，因此在选择其他选项时不会更改值。如何在jQuery中解决此问题？

$(function() {
    $('input, #city').change(function(){
        if ($('#a-city').attr('id') == 'a-city') {
            $('#price1').val('200');
            $('#price2').val('300');
        } else if ($('#b-city').attr('id') == 'b-city') {
            $('#price1').val('400');
            $('#price2').val('500');
        } else {
            $('#price1').val('600');
            $('#price2').val('700');
        }
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="city">
       <option>Select a city</option>
       <option id="a-city">Citya</option>
       <option id="b-city">Cityb</option>
       <option id="c-city">Cityc</option>
</select>
<input type="text" id="price1" value="50" readonly>
<input type="text" id="price2" value="100" readonly>

Answer 1

$("input, #city").change(function() {
    const id = $(this).children(":selected").attr("id");
    let priceOne, priceTwo;

    switch (id) {
      case "a-city": {
            priceOne = 200;
            priceTwo = 300;
            break;
      }
      case "b-city": {
            priceOne = 400;
            priceTwo = 500;
            break;
      }
      case "c-city": {
            priceOne = 600;
            priceTwo = 700;
            break;
      }
      default: {
            priceOne = 0;
            priceTwo = 0;
      }
    }

    $("#price1").val(priceOne);
    $("#price2").val(priceTwo);

});

Answer 2

我假设你的意思是：

<select id="city">
   <option>Select a city</option>
   <option value="a-city">Citya</option>
   <option value="b-city">Cityb</option>
   <option value="c-city">Cityc</option>
</select>
<input type="text" id="price1" value="50" readonly>
<input type="text" id="price2" value="100" readonly>


$(function() {
    $('#city').on('change', function(){
        if ($(this).val('id') == 'a-city') {
            $('#price1').val('200');
            $('#price2').val('300');
        } else if ($(this).val('id') == 'b-city') {
            $('#price1').val('400');
            $('#price2').val('500');
        } else {
            $('#price1').val('600');
            $('#price2').val('700');
        }
    })
});

如果城市发生了变化，那么价格也发生了变化，您将不需要传递输入标签，因为那样您就不必关注变化事件了，并且可以将它们标记为只读。

Answer 3

这是一种方法。

$(function() {
  $('input, #city').change(function() {
    var selectedId = $(this).children(":selected").attr('id'),
      $price1 = $('#price1'),
      $price2 = $('#price2');
    switch (selectedId) {
      case 'a-city':
        $price1.val('200');
        $price2.val('300');
        break;
      case 'b-city':
        $price1.val('400');
        $price2.val('500');
        break;
      default:
        $price1.val('600');
        $price2.val('700');
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="city">
  <option>Select a city</option>
  <option id="a-city">Citya</option>
  <option id="b-city">Cityb</option>
  <option id="c-city">Cityc</option>
</select>
<input type="text" id="price1" value="50" readonly>
<input type="text" id="price2" value="100" readonly>

Answer 4

您要检查的条件，

$('#a-city').attr('id') == 'a-city'

询问#a-city的ID实际上是否为a-city。这将永远是正确的，其他任何分支都不会运行。要获取所选<option>的ID，请使用

$('#city :selected').attr('id')

您可以在没有任何条件的情况下实现此：

$(function () {
  const cities = {
    'a-city': {
      '#price1': 200,
      '#price2': 300
    },
    'b-city': {
      '#price1': 400,
      '#price2': 500
    },
    'c-city': {
      '#price1': 600,
      '#price2': 700
    }
  };
  
  $('#city').change(function () {
    const selectedCityID = $('#city :selected').attr('id');
    const city = cities[selectedCityID];
    for (let priceID in city) {
      $(priceID).val(city[priceID]);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="city">
  <option disabled selected>Select a city</option>
  <option id="a-city">Citya</option>
  <option id="b-city">Cityb</option>
  <option id="c-city">Cityc</option>
</select>
<input type="text" id="price1" value="50" readonly>
<input type="text" id="price2" value="100" readonly>

这里的城市ID不是if或switch case的条件，而是包含该城市价格的对象的关键。然后，我们iterate over锁定该对象并设置两个价格。

^{此外，仅需要监视#city的更改，并且由于“选择城市”实际上不是城市，因此我将其设置为disabled。}

在选项更改时更新多个输入值

4 个答案: