как получить текст с выбранного option

304

26 марта 2017, 05:34

как получить текст с option:checked и записать это значение в . Я написал скрипт но он работает не корректно, вместо того чтобы добавить новый елемент к уже существующим например: один(уже было) я выбрал два и в поле должно быть - один, и добавить вот этот Один новый елемент - два - а у меня скрипт снова добавляет один и получаеться одинодиндва как это можно исправить?

js:

 $(".subway-location").change(function() {
            $(this).children("option").filter(":checked").each(function() {
                var x = $(this);
                console.log(x);
                var b = x.text();
                $("#metroDistance").css("display", "block");
                $("#metroDistance .info__item").append("<span class='distance-option'><span class='metro-name'>"+ b + "</span><input type='text' data-id='metro_distance'></span>");
            });
        });
<select class="subway-location">
<option>один</option>
<option>два</option>
<option>три</option>
</select>

Answer 1

Так надо реализовать?

 $(".subway-location").change(function() { 
           var b = 'test'; 
           b= $(this).find('option:selected').text(); 
             $("#metroDistance").css("display", "block"); 
                $("#metroDistance .info__item").append( 
                "<span class='distance-option'><span class='metro-name'>"+ b +  
                " </span><input type='text' data-id='metro_distance'></span>"); 
                 
                 
             
        });

#metroDistance { 
  display:none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<select class="subway-location"> 
<option value="1">один</option> 
<option value="2">два</option> 
<option value="3">три</option> 
</select> 
 
<div id="metroDistance"> 
   <div class="info__item"></div> 
</div>

Answer 2

Как я понял вы пытаетесь добавить спан в уже имеющуюся секцию. Вот пример как записать выбранную опцию селектора в тэг span и добавить к имеющемуся элементу html блока.

Прошу заметить что $('.mydiv').empty(); очищает элемент с классом .mydiv

$(document).ready(function() { 
 
$('#myselect').change(function() {  
    var value = $('#myselect option:selected').text(); 
    $('.mydiv').empty(); 
    $('.mydiv').append('<span>'+value+'</span>'); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<select id="myselect"> 
    <option value="1">Mr</option> 
    <option value="2">Mrs</option> 
    <option value="3">Ms</option> 
    <option value="4">Dr</option> 
    <option value="5">Prof</option> 
</select> 
<div class="mydiv"> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

Подробнее о сайте site-vizitka-kiev.org.ua

ТОП-10

Все популярные вопросы

React js формирование JSX на основе строки

Добрый деньИспользую React JS

308

javascript

Python json запись в csv: AttributeError: 'list' object has no attribute 'str'

Добрый день Есть json

273

javascript

Не получается реализовать таймеры Pomodoro

В приложении не получается создать таймеры обратного отсчетаОдин на время работы а другой га время отдыха

292

javascript

preloading next page with iframe

what's wrong in this script? on the current page reading time i need preload next page in iframe and after click "back" button hide current page and open loaded site

258