CODEWITHSUNDEEP
jquery
Deepak_iise
Deepak_iise

Reputation: 3

Jquery updated options in select drop down

I have select dropdown and I have click button, while clicking on that button there is a popup with details and a dropdown field. I have to update popup select tag with selected option.

    <select class="form-controlu">
    <option data-strike="$250.00" data-per-usr="$225.00">1 User</option>
    <option data-strike="$500.00" data-per-usr="$450.00">2 User</option>
    </select>

    <select name="productUser" id="productUser"></select>
<pre>
<script>
$(".col-md-4").click(function() {     
    var UserSelectedOption = $(this).find( ".form-controlu option:selected" ).html();   
    $("#productUser").html(UserSelectedOption);
})
</script>
</pre>

Thanks in advance

Upvotes: 0

Views: 35

Answers (1)

Hien Nguyen
Hien Nguyen

Reputation: 18975

You have wrong syntax to get selected option, also use append to select instead of html()

$(".col-md-4").click(function() {     
    var UserSelectedOption = $(".form-controlu").find( " option:selected" ).html();
    var selectedval = $(".form-controlu").val();
    $("#productUser").append(`<option value="${selectedval}">${UserSelectedOption}</option>`);
})


$(".col-md-4").click(function() {     
    var UserSelectedOption = $(".form-controlu").find( " option:selected" ).html();
    var selectedval = $(".form-controlu").val();
    $("#productUser").append(`<option value="${selectedval}">${UserSelectedOption}</option>`);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-controlu">
    <option data-strike="$250.00" data-per-usr="$225.00">1 User</option>
    <option data-strike="$500.00" data-per-usr="$450.00">2 User</option>
    </select>

    <select name="productUser" id="productUser"></select>
    
    <button class="col-md-4">Click</button>
<pre>
<script>

</script>
</pre>

Upvotes: 0

Related Questions