how to get text with option:checked and write this value to <span> . I wrote a script but it does not work correctly, instead of adding a new element to existing ones, for example: one (already) I chose two and in the field there should be <span>один</span> , and add this one New element - <span>два</span> - and my script adds one again and you get <span>один</span><span>один</span><span>два</span> how can I fix this?

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 answers 2

    So need to implement?

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

      As I understand you are trying to add a span to an existing section. Here is an example of how to write the selected selector option to the span tag and add to the existing element of the html block.

      Please note that $ ('. Mydiv'). Empty (); clears the element with the .mydiv class

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