Как показать часть кода, в зависимости от выбранного пункта в выпадающем списке?

Это на яваскрипте надо делать. Пришлите лучше уже сгенереный хтмл-код.

poyzn, код:

<div class="tab-page" id="tab-page-3">

      <h2 class="tab">Вакансии</h2>



      <script type="text/javascript">

      tabPane1.addTabPage( document.getElementById( "tab-page-3" ) );

      </script>



<table width="100%">

<tr>

      <td class="sectiontableheader" colspan="2"><div align="center">Дополнительные поля для вакансий</div></td>

    </tr>



  <tr>

    <td valign="top"><br /><strong>Форма занятости:</strong></td>



    <td width="80%" valign="top"><br />

<select name="44" class="inputbox" size="1">

	<option value="0" selected="selected">Не указывать</option>

	<option value="Полный день">Полный день</option>

	<option value="Частичная">Частичная</option>

	<option value="Стажировка">Стажировка</option>

	<option value="Временная">Временная</option>



</select>

  *Необязательно</td>

  </tr>

  <tr>

    <td valign="top"><br /><strong>График работы:</strong></td>

    <td width="80%" valign="top"><br />

<select name="custom1" class="inputbox" size="1">

	<option value="0" selected="selected">Не указывать</option>



	<option value="Гибкий">Гибкий</option>

	<option value="На дому">На дому</option>

	<option value="Сменный">Сменный</option>

</select>

  *Необязательно</td>

  </tr>

  <tr>



    <td valign="top"><br /><strong>Тип вакансии:</strong></td>

    <td width="80%" valign="top"><br />

<select name="custom2" class="inputbox" size="1">

	<option value="0" selected="selected">Не указывать</option>

	<option value="Прямая">Прямая</option>

	<option value="Агентство">Агентство</option>

</select>

  *Необязательно</td>



  </tr>



  <tr>

    <td valign="top"><br /><strong>Должность:</strong></td>

    <td><br /><input class="inputbox" type="text" name="custom3" size="35" value="" /> *Необязательно</td>

  </tr>

      <tr>

    <td width="20%" valign="top"><br /><strong>Образование:</strong></td>



    <td width="80%" valign="top"><br />

<select name="custom7" class="inputbox" size="1">

	<option value="" selected="selected">Не указывать</option>

	<option value="Высшее">Высшее</option>

	<option value="Неполное высшее">Неполное высшее</option>

	<option value="Среднее">Среднее</option>

	<option value="Среднее специальное">Среднее специальное</option>

	<option value="Неполное среднее">Неполное среднее</option>

	<option value="Ученая степень">Ученая степень</option>

	<option value="MBA">MBA</option>

</select>

  *Необязательно</td>

  </tr>

    </tr>



     <tr>

    <td width="20%" valign="top"><br /><strong>Пол:</strong></td>

    <td width="80%" valign="top"><br />

<select name="pol" class="inputbox" size="1">

	<option value="0" selected="selected">Не указывать</option>

	<option value="Мужской">Мужской</option>

	<option value="Женский">Женский</option>



	<option value="Не важен">Не важен</option>

</select>

  *Необязательно</td>

  </tr>

  <tr>

    <td valign="top"><br /><strong>Возраст:</strong></td>

    <td><br /><input class="inputbox" type="text" name="custom4" size="35" value="" /> *Необязательно</td>



  

</table>

<br /><br />



</div>

Как сделать например, чтоб при выборе пола "Мужской", появлялось поле с возрастом?

Пробуем так:

в блок head добавляем:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$("#vozrast").hide();



$("select[name=pol]").change(function() {

var pol = $(this).val();

if(pol == "Мужской") {

 $("#vozrast").fadeIn();  

} else {

 $("#vozrast").fadeOut();

}

});

});

</script>

Для tr в котором содержится Возраст добавляем

<tr id="vozrast">

poyzn, спасибо. Работает.

Samail добавил 30.10.2010 в 14:45

Но действует это только на первый tr с этим id. А если мне нужно чтоб несколько срок появлялось/исчезало? Для каждой такой скрипт вставлять? Или можно как-то попроще сделать?

Samail добавил 30.10.2010 в 19:00

В файрфоксе работает, а в ИЕ8, что-то не хочет. Все строки видны сразу

Samail добавил 30.10.2010 в 19:30

Уже нашел в чём косяк...

Теперь появилась новая проблема. Если пользователь редактирует сохраненные в БД данные, то форма открывается с уже выбранным пунктом в списке, но скрытые поля не видны. Приходится выбирать другой пункт, а потом снова нужный и только тогда они появляются. Как сделать чтоб они сразу были видны?

В PHP по идее нужно было бы добавить:

 if $row->pol == "Мужской" 

А что нужно добавить в яваскрипте?

Снова озадачился этим вопросом, если скрипт вот такой:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {



$("#nomerof").hide();



$("select[name=cid]").change(function() {



var cid = $(this).val();





if(cid == "22" || cid == "21" ) {

 $("#nomerof").fadeIn();  

} else {

 $("#nomerof").fadeOut();

}



}



});

});



</script>

То если cid уже содержится в БД и пункт выбирается автоматически (а не пользователь на него кликает). То как объяснить скрипту, что пункт уже выбран?

Пробовал:

<?php if ( $row->cid > 0 ) { ?>var cid = "<?php echo $row->cid;?>";<?php } ?>

В коде страницы появляется: var cid = "22", но строка с id="nomerof" не показывается. Нужно именно вручную кликнуть. Вот ка симитировать этот клик?

Если Вы хотите симитировать клик пользователя, то в яваскрипте (после полной загрузки страницы, в конце функции $(document).ready...) добавьте вызов тех функций, которые вызываются при клике.

В последнем случае это наверно будет строка

$("select[name=cid]").change();

gormarket, спасибо.

Samail добавил 23.01.2011 в 14:48

А как будет выглядеть эта строка для радиокнопки?

<tr>

    <td  width="30%" valign="top"><br /><strong>Показывать цену?:</strong></td>

    <td  width="70%" valign="top"><br />

	<input type="radio" name="showprice" value="0" checked="checked" class="inputbox" />Нет

	<input type="radio" name="showprice" value="1" class="inputbox" />Да

</td>

  </tr>

Вот так не работает.

$("input[name=showprice]").change();

В случае с select работает, а с input, что-то не хочет.

1. функция, которую Вы вызываете для input должна быть в наличии, в коде программы

2. $("input[name=showprice]") вернет 2 объекта в Вашем случае (ведь у Вас 2 элемента с атрибутом name="showprice") и функция будет вызвана при таком написании дважды (сначала для одного а затем и для второго объекта)

3. Не приходилось работать с радиокнопками, но кажется для них нет события OnChange, только OnClick, OnBlur и OnFocus

Так что для того, чтоб вызвать функцию, обрабатывающую событие OnClick первого элемента "showprice" нужна строка

$("input[name=showprice]").eq(0).click();

При этом данная функция должна быть описана в коде программы для $("input[name=showprice]") (как в первом случае для $("select[name=cid]").

Ну и немного в сторону:

для элемента input есть еще возможность программного клика на нем, как будто это сделал пользователь (это не вызов функции, а метод, который имитирует нажатие пользователя на радиокнопке, и кажется с генерацией соответствующего события)

$("input[name=showprice]").get(0).click();