Как обновить текст div на основе значения выпадающего списка?

Question

У меня есть 4 выпадающих меню, 2 для пункта назначения «От» и 2 для пункта «Кому». Что я хочу сделать, это обновить #from div и #to div на основе выпадающих значений.

, например, на «С» пункта назначения, если 1 и 5 выбран, то # с должно показать 1 -> 5

Это означает, что при выборе 1, он будет показывать 1 -> до тех пор, пока пользователь не выберет из 2-го выпадающего списка и он завершает последовательность.

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(' ')); 
}