2

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

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>

2 ответа 2

4

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

 $(".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>

0

Как я понял вы пытаетесь добавить спан в уже имеющуюся секцию. Вот пример как записать выбранную опцию селектора в тэг 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.