Показать / скрыть div при выборе опции с показом предварительно выбранного div

Question

Показать / скрыть div при выборе опции с показом предварительно выбранного div

0

Я хотел бы знать, как показывать скрытый div в зависимости от выбранного параметра, причем div из предварительно выбранного варианта уже показан.

<select name="fruits" id="fruits">
 <option value="apple" data-fruit-name="apple" selected="selected">Apple</option>
 <option value="mango" data-fruit-name="mango">Mango</option>
</select>

<div class="message" data-fruit-name="apple">I'm Apple.</div>
<div class="message" data-fruit-name="mango">I'm Mango.</div>

Сообщение, если оно не выбрано, должно быть скрыто. Но поскольку Apple предварительно выбран, я бы хотел, чтобы ее сообщение также было задумано. Когда пользователь выбирает Mango, сообщение Apple должно быть скрыто, сообщение Mango должно отображаться и наоборот.

hello 17 апр. 2014, в 10:34

Источник

1

Да, так где соответствующий код? Это всего лишь HTML, вы пытались сделать это самостоятельно в первую очередь?
Mr. Alien 17 апр. 2014, в 08:13
0

Там вы идете .. jsfiddle.net/h8BHy
Praveen Puglia 17 апр. 2014, в 08:37
0

Почему вы хотите скрыть или показать div? Вы просто хотите отобразить сообщение о выбранной опции. Не сложно показать или скрыть div. Просто обратитесь по этой ссылке api.jquery.com/change - это простое изменение jquery функция.
chinnu 17 апр. 2014, в 09:20
0

@Mr.AlienМистер Алиен, ты имеешь ввиду jquery? Пробовал, не работает. Это довольно легко для других.
hello 17 апр. 2014, в 09:25
0

@chinnu У меня есть свои причины, о которых мне не нужно говорить, правда.
hello 17 апр. 2014, в 09:26

Показать ещё 3 комментария

Теги:

javascript

jquery

html

css

5 ответов

3

Попробуйте этот код.

$('#fruits').change(function (){
  $('.message').hide();
  var fruit = $(this).find('option:selected').data('fruit-name');
  $('.message[data-fruit-name="' + fruit + '"]').show();
});

Но было бы лучше реорганизовать элементы сообщения, которые нужно идентифицировать, например:

<div class="message" id="apple">I'm Apple.</div>
<div class="message" id="mango">I'm Mango.</div>

а затем измените код на это:

$('#fruits').change(function (){
  $('.message').hide();
  var fruit = $(this).find('option:selected').data('fruit-name');
  $('#' + fruit).show();
});

xMort 17 апр. 2014, в 05:53

1

$(function(){
    $('#fruits').change(function(){
        var display = $(this).val();
        $('.message[data-fruit-name='+display+']').show().siblings('.message').hide();
    });
});

<select name="fruits" id="fruits">
 <option value="apple" data-fruit-name="apple" selected="selected">Apple</option>
 <option value="mango" data-fruit-name="mango">Mango</option>
</select>

<div class="message" data-fruit-name="apple" style='display:none;'>I'm Apple.</div>
<div class="message" data-fruit-name="mango" style='display:none;'>I'm Mango.</div>

Dimag Kharab 17 апр. 2014, в 07:15

1

 $(".message").hide();

$("#fruits").change(function() { 
     var _this = $(this);
    $(".message").each(function() { 
        if(_this.find("option:selected").data("fruit-name") == $(this).data("fruit-name")) {
         $(".message").hide();
         $(this).show();   
        }
    }); 

}).change();

скрипка

Sudharsan S 17 апр. 2014, в 06:26

1

Вы можете использовать val(), чтобы выбрать правильный div, показать его и использовать.siblings, чтобы скрыть другие:

JS:

$(function(){

    //Hide initially
    $("#"+$("select").val()).siblings("div").hide();

    $("select").change(function(){

        //Hide/show onChange
        $("#"+$("select").val()).show().siblings("div").hide();

    });

});

HTML:

<select>
    <option value="a" selected>a</option>
    <option value="b">b</option>
    <option value="c">c</option>
</select>

<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>

JSFiddle

David 17 апр. 2014, в 05:25

Ещё вопросы

Да, так где соответствующий код? Это всего лишь HTML, вы пытались сделать это самостоятельно в первую очередь?
Почему вы хотите скрыть или показать div? Вы просто хотите отобразить сообщение о выбранной опции. Не сложно показать или скрыть div. Просто обратитесь по этой ссылке api.jquery.com/change - это простое изменение jquery функция.
@Mr.AlienМистер Алиен, ты имеешь ввиду jquery? Пробовал, не работает. Это довольно легко для других.
@chinnu У меня есть свои причины, о которых мне не нужно говорить, правда.

Felix · Accepted Answer · 2014-04-17T05-59-00.000Z

Ты можешь сделать:

$('#fruits').change(function() {
    var fruitName = $(this).find('option:selected').data('fruit-name');
    $('.message[data-fruit-name="' + fruitName + '"]').show().siblings('.message').hide();
}).change();

Демо-версия скрипта