We Keep Coding

how force set selected

i'm try set selected with javascript and jquery but dont set the value, my code:
<select class="form-control" id="destino" name="destino" required>
</select>
this is my select for append the options i use a cycle for:
for(i=0; i<subdirectorios.length; i++){
temporal_value =path_directorioPrincipal.concat(subdirectorios[i]);
var option = $("<option value="+temporal_value+">"+ subdirectorios[i] +"</option>");
//append option
$("#modalProceso #destino").append(option);
}
the output:
i don't understand why set value as :
value="media/gestionDocumental/Operativos/Prueba" produccion=""
in the console return this value:
media/gestionDocumental/Operativos/Troquelado
media/gestionDocumental/Operativos/Prueba Produccion
for set selected use:
$('#destino option:contains("' + destino_path + '")').attr("selected", true)
//or this:
$('#destino').val(destino_path);
but dont set selected.
please any suggest..thanks..!!

Firstly - You need to wrap your options value in quotes otherwise when space occurs it'll be parsed as a separate property.
$("<option value='"+ temporal_value +"'>"+ subdirectorios[i] +"</option>");
As for your second issue you actually should call .change() after setting the option value, like below:
$("#destino").val(destino_path).change();
Sample JSFiddle

Get value from dynamically created droplist

I my code I create droplists and hidden field for each of them to be able to catch selected value in code behind. I do have a problem set hidden value to the value of selected item in droplist probably because I am not able to create correct selector.
Name of my droplist are dropTypeXXY where XX stands for two alphanumeric characters and Y stands for number for example.
dropTypeU19, dropTypeBB22, dropTypeAG71
hidden fields for them are hdnY where Y stands for number
hdn9, hdn22, hdn71
In both cases these values are IDs of given html elements.
My question is how can I assign list item value to hidden field when droplist selection is changed.
My jQuery
$(document).ready(function(){
$("select[id^='dropType']").on("change",function () {
alert("HI"); //Just to test the selector itself.
});
});
Edit:
My problem is that the selector is not working and alert is not even called. Whey I try to apply similar approach to droplist that I create in code behind it works but not for droplists created by jQuery.
var list = $("<select id = dropType" + response.d[i].TypeId+ i + "/>");
var valueField = $("<input type='hidden' id = 'hdn" + i + "' name ='hdn" + i + "' value=-1 />");
...
$("#<%=grdUsers.ClientID%>").after(list, valueField);
I create them based on AJAX call. I am able to display them in console and display them to user and even give them items but I am not able to run .change() event on them.
Sorry I did not mentioned it earlier.
This doesn't work for them as well. Is there a problem with html tags that are not part of DOM from the beginning of page life?
$("select").on("change", function () {
alert("hi");
});
Edit 2
I looks like my answer lies here. It actually works and alert is raised. Thank you very much guys I'll try to implement the data-target and class trick.

With Dynamically created controls it is easier to select them by class since you cannot use ClientID. Go give them a unique CssClass in code behind when creating the Control.
DropDownList ddl = new DropDownList();
ddl.Items.Insert(0, new ListItem("Value A", "0", true));
ddl.Items.Insert(1, new ListItem("Value B", "1", true));
ddl.CssClass = "DynamicDropDown";
Panel1.Controls.Add(ddl);
Now you can select them with jQuery like this
$(document).ready(function () {
$(".DynamicDropDown").on("change", function () {
alert("HI");
});
})

You can use a class selector ("select" for example) (instead of an id) and add an attribute data-target in your html that say which hidden field is linked to this droplist.
And your js can be something like :
$(document).ready(function(){
$("select.select").on("change",function () {
var $target = $($(this).attr("data-target"));
$target.val($(this).val());
});
});
Or you can also use DOM navigation to find the hidden field without any id if you know the structure of your code and if it's always the same.
Pseudo html code :
<div>
<select>...</select>
<input type="hidden">
</div>
jQuery :
$(document).ready(function(){
$("select").on("change",function () {
var val = $(this).val();
$(this).parent().find("input").val(val);
});
});

You can do it by adding class to a name you specify.
<select id="dropTypeU19" class="cls-name">
<option value="a">a</option>
<option value="a1">a</option>
</select>
<select id="dropTypeBB22" class="cls-name">
<option value="b">a</option>
<option value="b1">a</option>
</select>
<select id="dropTypeAG71" class="cls-name">
<option value="c">a</option>
<option value="c1">a</option>
</select>
<input type="hidden" id="hdn19" />
<input type="hidden" id="hdn22" />
<input type="hidden" id="hdn71" />
<script>
$(function () {
$("select.cls-name").change(function () {
var selectId = $(this).attr("id");
var selectValue = $(this).val();
var hiddenId = "#hdn" + selectId.slice(-2);
$(hiddenId).val(selectValue);
alert($(hiddenId).val());
});
});
</script>
OR:
$("select[id^='dropType']").change(function () {
var selectId = $(this).attr("id");
var selectValue = $(this).val();
var hiddenId = "#hdn" + selectId.slice(-2);
$(hiddenId).val(selectValue);
alert($(hiddenId).val());
});

jquery variable doesn't change on update

This my problem's semplification. I want to append some text after an input field (on update of the same field), only when the value of a select element is IT.
That's the fields:
<select id="billing_country">
<option value="FR">FR</option>
<option value="IT">IT</option>
</select>
<input type="text" id="woocommerce_cf_piva">
this is the script:
jQuery(document).ready(function () {
var $country_select = jQuery('#billing_country');
// When country change
$country_select.change(function () {
var $country = jQuery('#billing_country option:selected');
$country.each(function() {
FieldCheck(jQuery(this).val());
})
});
function FieldCheck($country) {
var $element = jQuery('#woocommerce_cf_piva');
if ($country == 'IT') {
$element.change(function () {
$element.after($country);
});
}
}
});
You can see this also on jsFiddle
Why it append country name also if i select FR?

It's difficult to understand what you're trying to do with your code.
You want the text input to change its value only if the select box has "IT" selected?
Why are you setting a change handler on the text input?
Why iterate through a select box's options if it's a single select? Just set the text input with the selected option's value, e.g.,
$(function() {
var $billingCountry = $('#billing_country');
$billingCountry.change(function() {
var $country = $('#billing_country option:selected');
fieldCheck($country.val());
});
function fieldCheck(country) {
var $element = $('#woocommerce_cf_piva');
if ($country !== 'IT') {
return;
}
$element.val(country);
}
});
https://jsfiddle.net/davelnewton/w5deffvk/
Edits
Naming conventions changed to reflect typical JS
Non-constructor function names start with lower-case
Non-JQ element vars don't get a leading $
Country value used as guard clause rather than nesting logic
This code is trivial, but nesting can make things harder to reason about

I would add a span and put the text in there so on subsequent change you can fix it:
<select id="billing_country">
<option value="FR">FR</option>
<option value="IT">IT</option>
</select>
<input type="text" id="woocommerce_cf_piva" /><span id="afterit"></span>
Note that this is still pretty verbose:
jQuery(document).ready(function() {
var $country_select = jQuery('#billing_country');
var $element = jQuery('#woocommerce_cf_piva');
// When country change
$country_select.on('change', function() {
var $country = jQuery(this).find('option:selected')[0].value;
var d = ($country == 'IT') ? $country : "";
$element.data('selectedcountry', d);
});
$element.on('change', function() {
var ct = $(this).data('selectedcountry');
//as you have it: $(this).after(ct);// append
// put it in the span to remove/blank out on subsequent changes
$('#afterit').text(ct);
});
});
Here is the total less-verbose version:
$('#woocommerce_cf_piva').on('change', function() {
var v = $('#billing_country').find('option:selected')[0].value;
$('#afterit').text((v == 'IT') ? v : "");
});

You have two problems:
input tag does not have onchange event; you should use onkeydown instead;
you should assign events before if conditions.

If I understand the problem correctly, you want to update input field with the value entered only when drop down selection is "IT". If that is the case, you need to watch input field event and invoke FieldCheck function from with in input field events.

Append Select Option to Text Field

I have a Select Box and a Text Field input box. Currently when the User selects a value from the Select Box, then the selected value is inputted into the Text Field input box.
<select name="nSupervisor" id="iSupervisor" onchange="PopulateUserName()">
<option value="fff">fff</option>
<option value="test1">test1</option>
<option value="dd">dd</option>
</select>
<input id="iSupervisorUserName" name="OBKey_WF_Manger_Supervisor_1" type="text" />
function PopulateUserName() {
var dropdown = document.getElementById("iSupervisor");
var field = document.getElementById("iSupervisorUserName");
field.value = dropdown.value;
}
Jsfiddle
http://jsfiddle.net/Hx6J5/1/
Currently it only takes one input.
I would like it to append inputs so the field will accept more than one select value, so if the User selects "fff", "fff" will get inputted into the field.
If the User then selects "dd", the field.value should become "fff/dd" with the "/" being the separator.
function PopulateUserName() {
var dropdown = document.getElementById("iSupervisor");
var field = document.getElementById("iSupervisorUserName");
$('field').val($('field').val() + dropdown.value);
}
I have tried this but it doesn't append.

You need to give field without quotes. If field is given in quotes jQuery will try to find elements with tag name field.
Live Demo
$(field).val($(field).val() + dropdown.value);

Using pure JS:
function PopulateUserName() {
var dropdown = document.getElementById("iSupervisor");
var field = document.getElementById("iSupervisorUserName");
if ( field.value == "" ){
field.value = dropdown.value;
}else{
field.value += "/" + dropdown.value;
}
}
See the working code at:
JSFiddle

I suggest to use multi select jquery plugin:
http://harvesthq.github.io/chosen/

Append more drop down box value to text box area

<html>
<script type="text/javascript">
function chkind1(){
var dropdown2 = document.getElementById('dropdown1');
var textbox = document.getElementById('textbox1');
textbox.value=dropdown1.value;
}
</script>
<script type="text/javascript">
function chkind2(){
var dropdown3 = document.getElementById('dropdown2');
var textbox = document.getElementById('textbox2');
textbox.value=dropdown2.value;
}
</script>
<input id="textbox1" name="size" type="text" />
<input id="textbox2" name="copies" type="text" />
<select onchange=chkind1()' id='dropdown1'>
<option value='Nil'>Select Print Size</option>
<option value = '$file - 5x7'>5x7</option>
<option value = '$file - 6x8'>6x8</option>
</select>
<select onchange='chkind2()' id='dropdown2'>
<option value = 'Nil'>Select how many Copies</option>
<option value = '1'>1</option>
<option value = '2'>2</option>
</select>
</html>
Hi all, trying to achieve on the first drop down box (size), is not to overwrite each selection but to append or add each selection one after the other. E.G 5x7, 6x8, etc etc.
I have had a go but can't seem to get it right, could I please have some help on this.
Cheers.

Change your value assignment to append your selection to the current value:
textbox.value += ' ' + dropdown1.value;
Add whatever characters in between the quotes to separate your entries.
UPDATE:
Per question in the comment to remove the value if it is selected again.
if(textbox.value.indexOf(dropdown1.value) == -1) {
textbox.value = textbox.value.replace(dropdown1.value, '');
} else {
textbox.value += ' ' + dropdown1.value;
}
Check to see if the value is contained in the string. indexOf returns -1 if the value is note present. Then you assign the value to be the string with that value removed.

Rather than over-write your previous textbox selection, add to it:
textbox.value += ", " + dropdown1.value;