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

Question

我有 4 个下拉列表，其中 2 个用于“从”目的地，2 个用于“目的地”目的地。 我想要做的是根据下拉值更新 #from div 和 #to div。

例如，在“From”目的地上，如果选择 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