We Keep Coding

Passing a value from a HTML dropdown to a button to fire up a modal

I'm trying to pass a value which is selected by the dropdown on to a button (data-target) so i can show modals dynamically. I'm generating the modals with PHP so everything will be generated automatically.
So whenever a user selects a dropdown, value gets passed to the <button data-target"xx">.
<div class="row">
<div class='col-md-2 nopadding'>
<div class='form-group nomarg'>
<select class="shop-name select2">
<option value="1">Shop 1</option>
<option value="2>">Shop 2</option>
<option value="3">Shop 3</option>
</select>
</div>
</div>
<div class='col-md-1 nopadding'>
<div class='form-group nomarg'>
<button type="button" class="btn btn-info btn-sm" data-
toggle="modal" data-target="#myModal">+</button>
</div>
</div>
</div>
I know how to pass a value from dropdowns to input fields, but passing a value from the dropdown to a button data-target is bit tricky. What's the best way to achieve this?
Below given code is the code i used to pass the dropdown data-price value to a input field.
Passing a value from a dropdown to a input field
<script>
$(document).ready(function() {
$('.select2').select2();
});
$(document).ready(function() {
$('select.material-price').change(function() {
var materialValue =
$(this).select2().find(":selected").data("price");
$(this).closest('.row').find('.material-
total').val(materialValue);
});
});
</script>

Since you're using jQuery you've just to attach on change event to the dropdown the change the value of the button like :
$('.shop-name').on('change', function() {
$(this).closest('.row').find('.btn-info').attr('data-target', '#myModal'+$(this).val());
//Just for test purpose
console.log($(this).closest('.row').find('.btn-info').attr('data-target'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class='col-md-2 nopadding'>
<div class='form-group nomarg'>
<select class="shop-name select2">
<option value="1">Shop 1</option>
<option value="2">Shop 2</option>
<option value="3">Shop 3</option>
</select>
</div>
</div>
<div class='col-md-1 nopadding'>
<div class='form-group nomarg'>
<button type="button" id='target-btn' class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">+</button>
</div>
</div>
</div>

This is a different approach but this will work i tested it out. :)
<div class="row">
<div class='col-md-2 nopadding'>
<div class='form-group nomarg'>
<select class="shop-name select2">
<option data-link="#100000" value="#10">Material A</option>
<option data-link="#400000" value="20>">Material B</option>
<option data-link="#500000" value="30">Material C</option>
</select>
</div>
</div>
<div class='col-md-1 nopadding'>
<div class='form-group nomarg'>
Hello
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('select.shop-name').change(function() {
var shopValue =
$(this).select2().find(":selected").data("link");
$(this).closest('.row').find('.shop-value').attr('href'
,shopValue);
});
});
</script>

Can not append option element dynamically using Jquery/Javascript and css

I have an issue. I am trying to append option tag dynamically but its not coming properly using Jquery/Javascript.Here also I am using bootstrap chosen-select class. I am explaining my code below.
<div class="popover-content">
<p>
<select class="chosen-select text-left" style="width:100%;" id="ctid">
<option value="" selected>Select City</option>
</select>
</p>
</div>
My javascript code is given below.
var url="common.php?action=getCity";
$.post(url,{"con_data":conval.options[conval.selectedIndex].value},function(data){
var obj=JSON.parse(data);
if(obj.isData==1){
$('#ctid').find('option').not(':first').remove();
$.each(obj.cid, function() {
$("#ctid").append("<option value="+this.city_id+">"+this.city_name+"</option>");
})
}
})
Here also i am getting the data properly and the loop is also running.But its not reflecting at front end.when I did inspect element i got the below generated html code.
<div class="popover-content">
<p>
<select class="chosen-select text-left" style="width: 100%; display: none;" id="ctid">
<option value="" selected="">Select City</option>
<option value="18">Bhubaneswar</option>
<option value="17">Delhi</option>
<option value="16">Bangalore</option>
<option value="15">Mumbai</option>
</select>
<div class="chosen-container chosen-container-single chosen-with-drop chosen-container-active" style="width: 0px;" title="" id="ctid_chosen">
<a class="chosen-single" tabindex="-1"><span>Select City</span>
<div><b></b>
</div>
</a>
<div class="chosen-drop">
<div class="chosen-search">
<input type="text" autocomplete="off">
</div>
<ul class="chosen-results">
<li class="active-result result-selected" data-option-array-index="0">Select City</li>
</ul>
</div>
</div>
</p>
</div>
The raw html code is generating the above part after option added dynamically.But my problem is thosze are not display on the front end view.Please help me to resolve thisz issue.

I think each loop every object and gives index as its first param and val as second, try this:
$.each(obj.cid, function(idx, o) {
$("#ctid").append("<option value="+o.city_id+">"+o.city_name+"</option>");
});
If you would like to get the options in the resulting ul, then make sure to append them first before initing chosen.
$.each(obj, function(idx, o) {
$("#ctid").append("<option value=" + o.city_id + ">" + o.city_name + "</option>");
});
$('#ctid').addClass('chosen-select');
$('.chosen-select').chosen();
HTML
<div class="popover-content">
<p>
<select class="text-left" style="width:100%;" id="ctid">
<option value="" selected>Select City</option>
</select>
</p>
</div>
Hope this helps

multiple clone not working when append in select 2

Can anyone please let me know what is wrong with the following code:
HTML
<div class="form-wrapper">
<div class="form-repaet">
<div class="form-group">
<select id="selecttag" name="book[0].tag" class="form-control select2 input-lg" style="width: 100%;">
<option selected="selected">Tag</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
<select class="form-control select2" name="book[0].is" style="width: 100%;">
<option selected="selected">is</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
<select class="form-control select2 test1" name="book[0].select_tag" style="width: 100%;">
<option selected="selected">Select a Tag</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
<div class="btn-group m-r">
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle">
<span class="dropdown-label"><i class="ion-gear-b"></i></span>
</button>
<ul class="dropdown-menu dropdown-select">
<li class="active">
All
</li>
<li>Option2</li>
<li>Option3</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
<div class="line line-dashed line-lg pull-in"></div>
</div>
JavaScript I am using following codes for javascript
$(document).ready(function(){
var counter = 1;
$("#add-form").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
$(".form-repaet:last").clone().appendTo(".form-wrapper");
//$(".form-repaet:last").select2();
counter++;
});
$("#removebtn").click(function () {
if(counter==1){
return false;
}
$(".form-repaet").last().remove();
counter--;
});
});
It is creating a clone of 'form-repaet' div but the select box is not working. I've tried select2(); after clone, but it is not working. Any help would be appreciated. Thanks so much!

Here is a working jsFiddle
First of all, add another selector to select2 elements, not select2 because that is attached to the spans what selec2 created. This is why you get that error:
The select2('destroy') method was called on an element that is not using
In my case this is xxx
And use like this:
$(".form-repaet:last").find('.xxx').select2('destroy');
var clone = $(".form-repaet:last").clone();
$('.form-wrapper').append(clone);
$('.xxx').select2();
I did not care about remove.
NOTE
In HTML all ID-s should be unique, so care about it, when you clone.

This worked for me:
before code:
addRecord($(this).closest('.glacc-detail'));
after change code:
$('.select2bs4').select2('destroy'); //added this line
addRecord($(this).closest('.glacc-detail'));
$('.select2bs4').select2(); //added this line

jQuery .next() next not working when inside div

After seeing my questions replied here and with success, the problems appeared when transposing to my script:
I have a dropdown that is being cloned which shows it's value on a side div. The problem is that when I clone it, the dropdown below don't work and the first updates all the remaining. Code:
Add
<div class="row">
<div class="products-row">
<div class="col-xs-12 nopadding">
<div class="col-xs-2">
<input type="text" id="number1" class="form-control" value="1" />
</div>
<!-- if i remove the div below and leave only the select, it works -->
<div class="col-xs-6" >
<select name="total-checkout" id="name" class="form-control product-name select" >
<option value="25" >A</option>
<option value="50" >B</option>
<option value="75" >C</option>
</select>
</div>
<div class="col-xs-2">
<div class="tags">25</div>
</div>
</div>
</div>
</div>
jQuery:
var count = 0;
$('#add-more').click(function(){
var id = $(".row:last").attr('id');
var appendDiv = $($(".products-row:last")[0].outerHTML);
appendDiv.attr('id', ++id).insertAfter(".products-row:last");
});
$('#name').change(function(event) {
$('.tags').html($('#name').val());
});
$(document).on('change', '.select', function() {
$(this).next(this).html($(this).val());
});
Working jsFiddle:
http://jsfiddle.net/QuadDamage/p843nc9j/
If I remove the <div class="col-xs-6"> from around the <select> the output will appear not formatted but correctly updating the div.
Thanks in advance.

It seems to me that you're targeting .col-xs-2 .tags if this is the case you need this code
$(this).parent().next().find('.tags').html($(this).val());

jQuery switching between two elements and change the SELECT field

<div class="r_row">
<div class="row field_currency">
<div class="f_row"><label class="" for="currency">Currency</label></div>
<div class="r_row">
<select id="currency" name="currency" class=" select">
<option value="ron" >USD</option>
<option value="eur" selected="selected">EUR</option>
</select>
<div class="error context" id="error_currency"></div>
<div class="hint context" id="hint_currency"></div>
<span class="checked"> </span>
<div class="fancy_select"><div class="first" value="USD">USD</div><div class=" last" value="eur">EUR</div>
<br clear="all">
</div></div>
<br style="clear:both">
</div>
</code></pre>
I want to use two divs <div>USD</div><div>EUR</div> , and with the help of jQuery , if i click on USD i want to change also the value of the Select box, and add a custom class to the USD div, if i clik on EUR , change the value of the select to EUR, remove the class from USD and add that class to EUR.
How can I do that ?
Thanks

Try this:
<script>
$(document).ready(function(){
$('.first').click(function(){
$('.first').addClass('className');
$('.last').removeClass('className');
$('option[value=ron]').prop("selected", true);
});
$('.last').click(function(){
$('.last').addClass('className');
$('.first').removeClass('className');
$('option[value=eur]').prop("selected", true);
});
});
</script>