Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.10.2019, 13:23
Аспирант
Отправить личное сообщение для denis_kontarev Посмотреть профиль Найти все сообщения от denis_kontarev
 
Регистрация: 01.04.2018
Сообщений: 43

Отображение контента при выборе select
Друзья, как сделать чтобы при входе на страницу, сразу был открыт первый div и отображался контент, ну а при смене select все скрывалось соответственно.

<style>
.hidden{
    display:none;
}
.chosen{
    display:block;
}
</style>
<select id="choice">
<option value="1" selected>one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<div id="1" class="hidden"> some codes <xmp><script>jquery 1 here...</script></xmp></div>
<div id="2" class="hidden"> some codes <xmp><script>jquery 2 here...</script></xmp></div>
<div id="3" class="hidden"> some codes <xmp><script>jquery 3 here...</script></xmp></div>


$(function() {
    $('#choice').change(function(){
        if( $('.chosen').length >0){
            $('.chosen').hide();
            $('.chosen').removeClass('chosen');
        }
        $('#' + $(this).val()).addClass('chosen').show();
    });
});
Ответить с цитированием
  #2 (permalink)  
Старый 11.10.2019, 13:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,830

denis_kontarev,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .hidden{
    display:none;
  }
  .hidden.chosen{
    display:block;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    $('#choice').change(function(){
      $('div.hidden').removeClass('chosen').eq(this.value).addClass('chosen')

    })
});
  </script>
</head>

<body>

<select id="choice">
<option value="0" selected>one</option>
<option value="1">two</option>
<option value="2">three</option>
</select>
<div  class="hidden chosen"> some codes <xmp><script>jquery 1 here...</script></xmp></div>
<div  class="hidden"> some codes <xmp><script>jquery 2 here...</script></xmp></div>
<div  class="hidden"> some codes <xmp><script>jquery 3 here...</script></xmp></div>

</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 11.10.2019, 18:03
Аспирант
Отправить личное сообщение для denis_kontarev Посмотреть профиль Найти все сообщения от denis_kontarev
 
Регистрация: 01.04.2018
Сообщений: 43

с div все отлично, Рони. Но я ставлю в
<tr class="hidden chosen">
И получается какая то каша. Ничего не переключается.
Ответить с цитированием
  #4 (permalink)  
Старый 11.10.2019, 18:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,830

denis_kontarev,
где пример вашего html?
Ответить с цитированием
  #5 (permalink)  
Старый 11.10.2019, 18:08
Аспирант
Отправить личное сообщение для denis_kontarev Посмотреть профиль Найти все сообщения от denis_kontarev
 
Регистрация: 01.04.2018
Сообщений: 43

<select id="choice">
<option value="1" selected>one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<tr class="hidden"> some codes</tr>
<tr class="hidden"> some codes</tr>
<tr class="hidden"> some codes</tr>
Ответить с цитированием
  #6 (permalink)  
Старый 11.10.2019, 18:14
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,865

В tr может быть только td, а уже в нем ... А xmp тег который не рекомендуется.
Ответить с цитированием
  #7 (permalink)  
Старый 11.10.2019, 18:22
Аспирант
Отправить личное сообщение для denis_kontarev Посмотреть профиль Найти все сообщения от denis_kontarev
 
Регистрация: 01.04.2018
Сообщений: 43

Это как пример с просторов интернета был.
Ответить с цитированием
  #8 (permalink)  
Старый 11.10.2019, 18:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,830

denis_kontarev,
<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    table.test tbody tr{
        display:none;
    }
    table.test tbody tr.chosen{
        display: table-row;
    }
    td{
        border: 1px solid #FF1493
    }

    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script>
$(function() {
        $('#choice').change(function(){
            $('table.test tbody tr').removeClass('chosen').eq(this.value).addClass('chosen')

        })
});
    </script>
</head>

<body>

<select id="choice">
<option value="0" selected>one</option>
<option value="1">two</option>
<option value="2">three</option>
</select>

<table width="400" class="test" >
	<thead>
		<tr >
			<th>Title 1</th>
			<th>Title 2</th>
			<th>Title 3</th>
		</tr>
	</thead>
	<tbody>
		<tr class="chosen">
			<td>Cell 1.1</td>
			<td>Cell 1.2</td>
			<td>Cell 1.3</td>
		</tr>
		<tr>
			<td>Cell 2.1</td>
			<td>Cell 2.2</td>
			<td>Cell 2.3</td>
		</tr>
        <tr>
			<td>Cell 3.1</td>
			<td>Cell 3.2</td>
			<td>Cell 3.3</td>
		</tr>
	</tbody>
</table>
</body>
</html>
Ответить с цитированием
  #9 (permalink)  
Старый 11.10.2019, 18:26
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,865

Сообщение от denis_kontarev
пример с просторов интернета
Не знаю на каких просторах вы это взяли, но может быть только так:

<tr><td><div class="hidden chosen"> some codes <xmp><script>jquery 1 here...</script></xmp></div></td></tr>

но никак не:

<tr><div class="hidden chosen"> some codes <xmp><script>jquery 1 here...</script></xmp></div></tr>

А xmp начиная с HTML3.2 устарел, а в HTML5 он полностью удален.
Ответить с цитированием
  #10 (permalink)  
Старый 11.10.2019, 18:57
Аспирант
Отправить личное сообщение для denis_kontarev Посмотреть профиль Найти все сообщения от denis_kontarev
 
Регистрация: 01.04.2018
Сообщений: 43

Благодарю друзья за помощь! Все отлично!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Переход по ссылке при выборе в списке (select) Frag Элементы интерфейса 0 30.08.2016 01:02
При выборе даты в datepicker страница перезагружается wfjs jQuery 2 08.01.2016 17:47
Смена цены при выборе оплаты Ivanihin Общие вопросы Javascript 2 01.11.2015 17:03
переход по ссылке при выборе в списке (select) sha444 Элементы интерфейса 1 28.01.2013 07:06
Скрытие формы artwalek Общие вопросы Javascript 3 31.01.2012 19:16