Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Вывод у выбранного select текст под тегом option (https://javascript.ru/forum/misc/54156-vyvod-u-vybrannogo-select-tekst-pod-tegom-option.html)

k_DizeL 05.03.2015 23:23
Вывод у выбранного select текст под тегом option
 
<select>
    <option>---</option>
    <option>Nissan</option>
    <option>Toyota</option>
    <option>Hyndai</option>
</select>

<div id="description1"></div>

<script>
var sel=$("#select");
sel.change(function(){
var ss='';
sel.each(function(){if($(this).is('option:selected')){names+=$(this).html()+'\n';}});
$('#description1').html(ss);
});
</script>


В чем ошибка? Почему не получается вывести значение выбранного option в div?

laimas 05.03.2015 23:32
И зачем это, если текущее значение списка, это и есть выбранная опция? Нужно было бы перебирать опции списка со множественным выбором, чтобы получить выбранные, но в этом то списке зачем?

k_DizeL 05.03.2015 23:42
Цитата:
Сообщение от laimas (Сообщение 359808)
И зачем это, если текущее значение списка, это и есть выбранная опция? Нужно было бы перебирать опции списка со множественным выбором, чтобы получить выбранные, но в этом то списке зачем?
Я Вас не понял или Вы меня не поняли :)
Там в коде ошибка должно быть 
<select id='select'>

рони 05.03.2015 23:49
k_DizeL,
<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #list li  {
    display: none;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){var sel=$("select");
sel.change(function(){
$('#description1').html(this.value);
});

});


  </script>
</head>

<body>
 <select>
    <option>---</option>
    <option>Nissan</option>
    <option>Toyota</option>
    <option>Hyndai</option>
</select>

<div id="description1"></div>

<script>

</script>

</body>

</html>

k_DizeL 06.03.2015 00:14
рони, дело в том, что на странице не 1 select, а 4. Поэтому я использовал такую строчку:
sel.each(function(){if($(this).is('option:selected')){names+=$(this).html()+'\n';}});

И пытался вывести название под тегом option, а не его value.

k_DizeL 06.03.2015 00:21
Попробывал так, но почему то не вышло сделать проверку. В итоге мне выводит все значения option
var xxx=$("select");
xxx.change(function(){
var names='';
xxx.each(function(){if($(this).find('option:selected')){name+=$(this).text()+'\n';}});
$('#text_comment').html(name);
});

k_DizeL 06.03.2015 00:44
В итоге закончилось на этом, тут все работает, кому надо
$("select").change(function () {
          var str = "";
          $("select option:selected").each(function () {
                str += $(this).text() + "\n";
              });
          $("#text_comment").text(str);
        })
        .trigger('change');

рони 06.03.2015 00:52
k_DizeL,
<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
  	$(function()
  	  {
  	    var xxx = $("select");
  	    xxx.change(function()
  	      {
  	        var names = '';
  	        $('option:selected', xxx).each(function() {names += this.text+'\n';});
  	        $('#text_comment').html(names);
  	      }
  	    );
  	  }
  	);
  </script>
</head>

<body>
 <select>
    <option>---</option>
    <option>Nissan</option>
    <option>Toyota</option>
    <option>Hyndai</option>
</select>
 <select>
    <option>---</option>
    <option>Nissan</option>
    <option>Toyota</option>
    <option>Hyndai</option>
</select>
 <select>
    <option>---</option>
    <option>Nissan</option>
    <option>Toyota</option>
    <option>Hyndai</option>
</select>
<div id="text_comment"></div>

<script>

</script>

</body>

</html>


Часовой пояс GMT +3, время: 11:58.