Вариант выбора, не отображается по умолчанию

По умолчанию значение Content1, но не показывает "текст по умолчанию шоу"Вариант выбора, не отображается по умолчанию

пожалуйста, помогите мне ..

jQuery(document).ready(function($) { 
 
    jQuery('#select123').change(function() { 
 
    jQuery('.content123').hide(); 
 
    jQuery('#' + jQuery(this).val()).show(); 
 
    }); 
 
});

div.content123 { 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select123"> 
 
    <option value="content1">content1</option> 
 

 
    <option value="content2">content2</option> 
 

 
    <option value="content3">content3</option> 
 
    <option value="content4">content4</option> 
 
</select> 
 
<div id="content1" class="content123"> 
 
    text defult show 
 
</div> 
 

 
<div id="content2" class="content123"> 
 
    contentttttttt 
 
</div> 
 
<div id="content3" class="content123"> 
 
    content3 
 
</div> 
 
<div id="content4" class="content123"> 
 
    content4 
 
</div>

источник

2016-12-27 Nazanin123

Здравствуйте и добро пожаловать в StackOverflow. Пожалуйста, найдите время, чтобы прочитать страницу справки, особенно разделы с названием [«Какие темы можно задать здесь?»] (Http://stackoverflow.com/help/on-topic) и [«Какие типы вопросов я должен не спрашивать? "] (http://stackoverflow.com/help/dont-ask). И что еще более важно, прочитайте [контрольный список вопросов переполнения стека] (http://meta.stackexchange.com/q/156810/204922). Вы также можете узнать о [Минимальных, Полных и Подтверждаемых примерах] (http://stackoverflow.com/help/mcve). –

Исправить разметку. – Banzay

не отображается, потому что вы установили отображение .content123: none; в стиле , а также скрыть на jQuery –

по умолчанию Безразлично В Показывать, потому что CSS скрывает все DIV. Вы можете инициировать событие click на select при загрузке страницы, чтобы он отображал значение по умолчанию.

jQuery(document).ready(function($) { 
 
    jQuery('#select123').change(function() { 
 
    jQuery('.content123').hide(); 
 
    jQuery('#' + jQuery(this).val()).show(); 
 
    }).trigger("change"); 
 
});

div.content123 { 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select123"> 
 
    <option value="content1">content1</option> 
 

 
    <option value="content2">content2</option> 
 

 
    <option value="content3">content3</option> 
 
    <option value="content4">content4</option> 
 
</select> 
 
<div id="content1" class="content123"> 
 
    text defult show 
 
</div> 
 

 
<div id="content2" class="content123"> 
 
    contentttttttt 
 
</div> 
 
<div id="content3" class="content123"> 
 
    content3 
 
</div> 
 
<div id="content4" class="content123"> 
 
    content4 
 
</div>

источник

2016-12-27 17:03:32 Barmar

Чтобы идти минимально и по-прежнему эффективно, я просто написал * (например) * ** '' ** вместо ** '' **, поскольку тексты элементов опций соответствуют их соответствующим значениям. * Для получения более подробной информации прочитайте [здесь] (https://developer.mozilla.org/en/docs/Web/HTML/Element/option) (Если этот атрибут опущен, значение берется из текстового содержимого опции элемент.). * – nyedidikeke

@nyedidikeke Я думаю, что это плохой стиль, позволяющий 'value' по умолчанию. Кроме того, это может быть просто потому, что это был пример игрушек, что они одинаковые, но, вероятно, это не то же самое в реальном приложении. – Barmar

Я бы скорее сказал * на основе потребностей *, а не из-за плохого стиля *, если только я не знаю и не игнорирую! Не возражаете ли вы продумать дальше, чтобы, возможно, просветить меня? – nyedidikeke

Вам нужно добавить атрибут selected="selected" к варианту, который вы хотите использовать по умолчанию для select. Тогда в сценарии вы должны показать соответствующие div

$(document).ready(function() { 
 
    $('#' + $("#select123").val()).show(); 
 
    
 
    $('#select123').change(function(){ 
 
    \t \t $('.content123').hide(); 
 
    \t \t $('#' + $(this).val()).show(); 
 
    \t }); 
 
    });

div.content123 { 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select123"> 
 
    \t <option value="content1" selected="selected">content1</option> 
 

 
    \t <option value="content2">content2</option> 
 
    \t 
 
    <option value="content3">content3</option> 
 
    \t <option value="content4">content4</option> 
 
    </select> 
 
    <div id="content1" class="content123"> 
 
    \t text defult show 
 
    </div> 
 

 
    <div id="content2" class="content123"> 
 
    \t contentttttttt 
 
    </div> 
 
    <div id="content3" class="content123"> 
 
    \t content3 
 
    </div> 
 
    <div id="content4" class="content123"> 
 
    \t content4 
 
    </div>

источник

2016-12-27 17:07:57 Banzay

Вариант выбора, не отображается по умолчанию

ответ

Смежные вопросы