Question

我有4个下拉菜单，2个用于＆＃34;来自＆＃34;目的地和2为＆＃34; To＆＃34;目的地。我想要做的是根据下拉值更新#from div和#to div。

例如在＆＃34; From＆＃34;目的地，如果选择1和5，那么#from必须显示1 -> 5

这意味着在选择1时，它将显示1 ->，直到用户从第二个下拉列表中选择并完成序列。

from
<select id="from_country">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<select id="from_city">
    <option value="1">4</option>
    <option value="2">5</option>
    <option value="3">6</option>
</select>
<br>
<br />
to
<select id="to_country">
    <option value="1">7</option>
    <option value="2">8</option>
    <option value="3">9</option>
</select>

<select id="to_city">
    <option value="1">10</option>
    <option value="2">11</option>
    <option value="3">12</option>
</select>

<div id="from"></div>
<div id="to"></div>

Answer 1

$('#from_country').change(function () {
    var country = $('option:selected', this).val();
    var city = $('#from_city').val();
    $('#from').text(country + "->" + city);

})
$('#from_city').change(function () {
    var city = $('option:selected', this).val();
    var country = $('#from_country').val();
    $('#from').text(country + "->" + city);

})


$('#to_country').change(function () {
    var country = $('option:selected', this).val();
    var city = $('#to_city').val();

    console.log(country + "->" + city)
    $('#to').text(country + "->" + city);

})
$('#to_city').change(function () {
    var city = $('option:selected', this).val();
    var country = $('#to_country').val();
    $('#to').text(country + "->" + city);

})

试试这个

demo

Answer 2

你可以这样做。

$('#from_country').change(function () {
    $('#from').text( $('#from_country :selected').text() + '->' +
 $('#from_city :selected').text());
    });

$('#from_city').change(function () {
    $('#from').text( $('#from_country :selected').text() + '->' +
 $('#from_city :selected').text());
    });

$('#to_country').change(function () {
    $('#to').text( $('#to_country :selected').text() + '->' +
 $('#to_city :selected').text());
    });

$('#to_city').change(function () {
    $('#to').text( $('#to_country :selected').text() + '->' +
 $('#to_city :selected').text());
    });

Answer 3

这是一个简单的解决方案：http://jsbin.com/huvilegeso/edit?html,js,output。我只为From部分做过。 To部分非常相似。

var from = [null, '->'];

$('#from_country').on('change', function() {
  from[0] = $(this).val();
  renderFrom(from);
});

$('#from_city').on('change', function() {
  from[2] = $(this).val();
  renderFrom(from);
});

function renderFrom(from) {
  $('#from').html(from.join(' '));
}

如何根据下拉值更新div文本？

3 个答案: