функциональные возможности управления HTML

Question

У меня есть select HTML элемент

так:

<select> 
    <option id="US" value="US"> 
    </option> 
    <option id="Canada" value="Canada"> 
    </option> 
</select> 

Я хочу две вещи:

1. Я хочу, чтобы отправлять запрос на сервер при выборе опции
2. И я хочу разместить html-элементы внутри опции

Возможны ли эти две возможности (для всех браузеров, особенно для современного браузера)?

Answer 1

Использование change Событие на select.

$('select').on('change', function() { 
    $.ajax({ 
     url: '', 
     data: { 
      ... 
     } 
    }); 
}); 

Встраивание HTML внутри option. НЕ РЕКОМЕНДУЕТСЯ

$('option:first').html('<div>Hello</div>'); 

Answer 2

Если вы используете JQuery:

$(function() { 
    $('select').on('change', function() { 
    $.post('your/path', $(this).val(), function(data) { 
     var option = $('select option[value="'+$('select').val()+'"]'); 
     // Do what you want with your option 
    }; 
    }); 
});