jQuery addClass с использованием выбора ввода

Question

Я немного новичок в jQuery.

У меня есть 5 вариантов в выпадающем меню.Я хочу добавить класс в div в зависимости от того, какая опция выбрана.Затем этот класс изменит макет содержимого с помощью CSS.

Вот пример, если это поможет!

Спасибо

<form>

<select>
<option id="1">layout 1</option>
<option id="2">layout 2</option>
<option id="3" selected>layout 3</option>
<option id="4">layout 4</option>
<option id="5">layout 5</option>
</select>

<div class="3">styled content</div>

</form>

Answer 1

Вы можете использовать ".attr ()", чтобы установить атрибут класса для обмена div. Лучше всего сначала изменить параметр id на значение . то:

$("select").change(function() {
   $("div").attr("class", $(this).val());
});

(РЕДАКТИРОВАТЬ) Изменить на:

$("select#np_blog_layout").change(function() {
   $("div#changebox").attr("class", $(this).val());
});

Answer 2

Что сказал 'rudeovski ze bear', но если вы все еще хотите установить его в класс div для идентификатора выбранных элементов, вот оно.

$('select').change(function() {
    $('div').attr('class', $(this).attr('id'));
});

Answer 3

Во-первых, вам не нужно использовать идентификатор для ваших опций. Поместите значения в атрибут value. Поместите ID в ваш div и выберите, чтобы вы могли выбирать их, используя jQuery.

<form>

<select Id="selectElement">
<option value="1">layout 1</option>
<option value="2">layout 2</option>
<option value="3" selected>layout 3</option>
<option value="4">layout 4</option>
<option value="5">layout 5</option>
</select>

<div id="styledContent" class="3">styled content</div>

</form>

На JS

    //Attach event handler to select element's onchange event
$('#SelectElement').bind("change",changeStyle);

    //The event handler
function changeStyle()
{
       //Set class to selected value
   $('#styledContent').class($('#SelectElement').val());
}