CSS для выбора другого элемента на основе HTML Выберите значение параметра

Есть ли селектор CSS, который позволяет мне выбирать элемент на основе значения параметра выбора HTML?

<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<p>Display only if an option with value 1 is selected</p>

Я ищу метод HTML/CSS только для отображения выбранного количества полей формы. Я уже знаю, как это сделать с помощью Javascript.

Есть ли способ сделать это?

Edit:

Название вопроса, возможно, вводит в заблуждение. Я не пытаюсь создать поле выбора, это довольно распространенное и много ответов на SO уже. Я на самом деле пытался стилизовать элемент <P> на основе значения, выбранного в <select>.

Как бы то ни было, что я действительно пытаюсь сделать, это отобразить несколько полей формы на основе выбранного числового значения:

<select name="number-of-stuffs">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<div class="stuff-1">
     <input type="text" name="stuff-1-detail">
     <input type="text" name="stuff-1-detail2">
</div>
<div class="stuff-2" style="display:none"> 
     <input type="text" name="stuff-2-detail">
     <input type="text" name="stuff-2-detail2">
</div>
<div class="stuff-3" style="display:none">
     <input type="text" name="stuff-3-detail">
     <input type="text" name="stuff-4-detail2">
</div>

Я хотел бы отображать div.stuff-1 и div.stuff-2, когда число_файлов = 2 и display div.stuff-1 div.stuff-2 и div.stuff-3, когда количество штук = 2.

Что-то вроде этого fiddle

Ответы

Ответ 2

Вы можете использовать

select option[value="1"]

но поддержка браузера не будет фантастической.

Ответ 3

Для этого, вероятно, требуется родительский селектор, который не был указан для CSS2 или CSS3.

Селектор объектов определенный в рабочем проекте CSS4 на май 2013 года, но ни один разработчик браузера еще не реализовал его.

Является ли рассматриваемый метод (теоретически) использующим селектор субъекта, еще предстоит увидеть.

Ответ 4

Я считаю, что в режиме "live" или в реальном времени это возможно только при использовании javascript или jQuery. Оберните потенциально скрытые поля в div с display: none onLoad и измените состояние JS или jQuery на display: block или, как вам нравится.

//Show Hide based on selection form Returns
$(document).ready(function(){

//If Mobile is selected
$("#type").change(function(){
    if($(this).val() == 'Movil'){
     $("#imeiHide").slideDown("fast"); // Slide down fast
    } else{
     $("#imeiHide").slideUp("fast"); //Slide Up Fast
    }
});

//If repairing is selected
$("#type").change(function(){
if($(this).val() == 'repairing'){


$("#problemHide").slideDown("fast"); // Slide down fast
$("#imeiHide").slideDown("fast"); // Slide down fast
}else{
$("#problemHide").slideUp("fast"); //Slide Up Fast
}
});
});
// type is id of <select>
// Movil is option 1
// Repairing is option 2
//problemHide is div hiding field where we write problem
//imeiHide is div hiding field where we write IMEI

Я использую в одном из своих приложений...

Возможно также с PHP, но с PHP вам придется отправить запрос на изменение, или вы можете написать код в php, чтобы загружать определенные классы на основе уже выбранных значений, например

<select class="<?php if($valueOne == 'Something'){echo 'class1';}else{echo 'class2';}">
   <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

Ответ 5

Как насчет этой альтернативы?

HTML:

<input name="number-of-stuffs" type="radio" value="1" />
<div>
    <input type="text" name="stuff-1-detail" />
    <input type="text" name="stuff-1-detail2" />
</div>
<input name="number-of-stuffs" type="radio" value="2" />
<div>
    <input type="text" name="stuff-2-detail" />
    <input type="text" name="stuff-2-detail2" />
</div>
<input name="number-of-stuffs" type="radio" value="3" />
<div>
    <input type="text" name="stuff-3-detail" />
    <input type="text" name="stuff-4-detail2" />
</div>

CSS

div {
    display: none;
}

input:checked + div {
    display: block;
}

Вы также можете использовать label и спрятать (несколько способов) input, если это необходимо. Я признаю, что это требует некоторого вмешательства, чтобы отображать группы input и div, но я думаю, что это того стоит.