I have multiple select topion.
And I need to show the selected values.with the data of '2,4,5;
<select id="testID" multiple="multiple">
<option value="1">test Value1</option>
<option value="2">test Value2</option>
<option value="3">test Value3</option>
<option value="4">test Value4</option>
<option value="5">test Value5</option>
<option value="6">test Value6</option>
</select>
Can I use this code to get what I need.
<script type="javascript">
$(document).ready(function() {
var val_to_select = '2,4,5';
$( '#testID' ).val( val_to_select );
)};
</script>
I need output to be like this
<select id="testID" multiple="multiple">
<option value="1">test Value1</option>
<option value="2" selected>test Value2</option>
<option value="3">test Value3</option>
<option value="4" selected>test Value4</option>
<option value="5" selected>test Value5</option>
<option value="6">test Value6</option>
</select>
you can pass the value in an array like this
$("#testID").val([1,2,3]);
JsFiddle
You can use this:
var data="1,2,4";
//Make an array
var dataarray=data.split(",");
// Set the value
$("#testID").val(dataarray);
// Then refresh
$("#testID").multiselect("refresh");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="testID" multiple="multiple">
<option value="1">test Value1</option>
<option value="2">test Value2</option>
<option value="3">test Value3</option>
<option value="4">test Value4</option>
<option value="5">test Value5</option>
<option value="6">test Value6</option>
</select>
Also your code is not javascript but jquery.
Related
When the form is submit I can only get the number assigned to the value. I want to submit any of the texts that is between the select options.
For example, when I select Bird and Dove I want to receive Bird and Dove not 3 and 3
$("#select1").change(function() {
if ($(this).data('options') === undefined) {
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form method="POST" action="process.php">
<select name="select1" id="select1">
<option value="0">-Select-</option>
<option value="1">Cars</option>
<option value="2">Phones</option>
<option value="3">Birds</option>
</select>
<select name="select2" id="select2">
<option value="0">-Select-</option>
<option value="1">BMW</option>
<option value="1">Benz</option>
<option value="1">Toyota</option>
<option value="2">iPhone</option>
<option value="2">Samsung</option>
<option value="2">Motorola</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="3">Dove<option>
</select><br>
<label>Postal code</label>
<input type="number" name="zipcode" placeholder="postal code">
<button>Search</button>
</form>
When the form is submit the value of the selected option is sent. The problem is because you're using this value to match the child option elements to the parent.
To fix this you need to use value as it was intended, ie. to hold the value you want to send to the server when the form is submit, and use a different method for grouping the option elements between select. I'd suggest using a data attribute for this instead, like this:
$("#select1").change(function() {
if (!$(this).data('options')) {
$(this).data('options', $('#select2 option').clone());
}
var category = $(this).find('option:selected').data('category');
var options = $(this).data('options').filter(function() {
return $(this).data('category') == category;
});
$('#select2').html(options);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="process.php">
<select name="select1" id="select1">
<option data-category="0" value="">-Select-</option>
<option data-category="1" value="Cars">Cars</option>
<option data-category="2" value="Phones">Phones</option>
<option data-category="3" value="Birds">Birds</option>
</select>
<select name="select2" id="select2">
<option data-category="0" value="Cars">-Select-</option>
<option data-category="1" value="BMW">BMW</option>
<option data-category="1" value="Benz">Benz</option>
<option data-category="1" value="Toyota">Toyota</option>
<option data-category="2" value="iPhone">iPhone</option>
<option data-category="2" value="Samsung">Samsung</option>
<option data-category="2" value="Motorola">Motorola</option>
<option data-category="3" value="Eagle">Eagle</option>
<option data-category="3" value="Hawk">Hawk</option>
<option data-category="3" value="Dove">Dove</option> <!-- note I fixed your typo here, missing / -->
</select><br>
</form>
Just change the value from number to text.
example
<option value="Hawk">Hawk</option>
<option value="Dove">Dove<option>
Done!
I have three drop down selected values as you can see below.
How can I say for example if car = volvo and color = Black and name = Jone // do something or alert (cool) in JavaScript?
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="black">black</option>
<option value="green">green</option>
</select>
<select>
<option value="'mark">'mark</option>
<option value="jones">jones</option>
<option value="james">james</option>
<option value="Vardy">Vardy</option>
</select>
It would have been very easy with angular js by two way binding and applying same valuechange listener on all the three dropdowns.
However, here also you can provide 3 different ids to your dropdowns and bind them with same value-change listener using onchange attribute.
In the value-change listener function , get the value of all the 3 drop down value by document.getElementById , comapre them and display alert accordingly. You can find below the sample solution for it which I prepared:
<head>
<script>
function dropdownChange() {
var car=document.getElementById("car").value;
var color=document.getElementById("color").value;
var owner=document.getElementById("owner").value;
if(car==="volvo" && color==="red" && owner ==="james") {
alert("Cool");
}
}
</script>
</head>
<body>
<select id ="car" onchange="dropdownChange();">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select id="color" onchange="dropdownChange();">
<option value="red">red</option>
<option value="blue">blue</option>
<option value="black">black</option>
<option value="green">green</option>
</select>
<select id="owner" onchange="dropdownChange();">
<option value="'mark">'mark</option>
<option value="jones">jones</option>
<option value="james">james</option>
<option value="Vardy">Vardy</option>
</select>
</body>
I have select :
<select class="selCommon" name="country_id">
<option value="">Select</option>
<option value="40">Afghanistan</option>
...
<option value="37">Switzerland</option>
...
</select>
How can I move option with text Switzerland to the second position in the list ? Result will be :
<select class="selCommon" name="country_id">
<option value="">Select</option>
<option value="37">Switzerland</option>
<option value="40">Afghanistan</option>
...
</select>
You can use jquery after() to place it after the first-child in the select - see demo below:
$('select[name=country_id] option:first-child').after($('select[name=country_id] option[value=37]'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selCommon" name="country_id">
<option value="">Select</option>
<option value="40">Afghanistan</option>
<option value="37">Switzerland</option>
</select>
You can get all of the <option> elements, and then filter them by the value attribute. Finally, once you have the correct element selected (in this case for Switzerland), you can use insertBefore() to move its location in the DOM.
Example:
var $opts = $('.selCommon').children();
$opts.filter('[value="37"]').insertBefore( $opts.eq(1) )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selCommon" name="country_id">
<option value="">Select</option>
<option value="40">Afghanistan</option>
<option value="40">United Kingdom</option>
<option value="40">USA</option>
<option value="37">Switzerland</option>
</select>
You can also try this:
$(document).ready(function(){
var options = $('.selCommon option' );
var SwitzerlandIndex=0;
var cnt=0;
$(options).each(function(){
if($(this).text() == "Switzerland"){
SwitzerlandIndex=cnt;
}
cnt++;
});
$(options[SwitzerlandIndex]).insertAfter($(options[0]));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selCommon" name="country_id">
<option value="">Select</option>
<option value="40">Afghanistan</option>
<option value="41">Test</option>
<option value="37">Switzerland</option>
<option value="38">Test 2</option>
</select>
You can sort on the value
$('.selCommon option').sort((a, b) => a.value - b.value).appendTo('.selCommon');
$('.selCommon').val("")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selCommon" name="country_id">
<option value="">Select</option>
<option value="40">Afghanistan</option>
<option value="57">Sweden</option>
<option value="37">Switzerland</option>
<option value="12">USA</option>
</select>
I´m now beginning with programming and I need to know what text would be the value of this code. The JS code would be an "on click" event from this unfoldable list. Thanks you in advance!!
<select name="select1" data-dojo-type="dijit/form/Select">
<option value="Artesania">Artesania</option>
<option value="Banco" selected="selected">Banco</option>
<option value="Bar">Bar</option>
<option value="Bodega">Bodega</option>
<option value="Boutique">Boutique</option>
<option value="Discoteca">Discoteca</option>
var selectbox = document.getElementById('select');
selectbox.addEventListener('change', function(){
console.log(this.value);
//do whatever you want with the value
});
<select name="select1" data-dojo-type="dijit/form/Select" id='select'>
<option value="Artesania">Artesania</option>
<option value="Banco" selected="selected">Banco</option>
<option value="Bar">Bar</option>
<option value="Bodega">Bodega</option>
<option value="Boutique">Boutique</option>
<option value="Discoteca">Discoteca</option>
</select>
I am using Carmen gem for country DropDown. I am using carmen at two places. I want to set these dropdowns equal with selected value by clicking on checkbox. Html code for drop down:-
<select id="contact_attributes" name="dealer[contact_attributes][country]" class="initialized">
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="IN" selected="selected>India</option>
</select>
<input type="checkbox" id="SameAsCurrentAddress" class="filled-in">
<select id="permanent_address" name="dealer[permanent_address_attributes][country]" class="initialized">
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="IN">India</option>
<option value="US" selected="selected">United States</option
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
</select>
My code is here:
$('#SameAsCurrentAddress').on('click', function () {
if ($('#SameAsCurrentAddress').is(':checked')) {
$('select#permanent_address').val($('select#contact_attributes').val());
});
But i am unable to set the value eqaul. How to set equal? Please help me.
You have a bunch of syntax errors. Please use a good IDE like Eclipse to catch these errors for you. This works:
<select id="contact_attributes" name="dealer[contact_attributes][country]" class="initialized">
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="IN" selected="selected">India</option>
</select>
<input type="checkbox" id="SameAsCurrentAddress" class="filled-in">
<select id="permanent_address" name="dealer[permanent_address_attributes][country]" class="initialized">
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="US" selected="selected">United States</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
</select>
$('#SameAsCurrentAddress').click(function () {
if ($('#SameAsCurrentAddress').is(':checked')) {
$('#permanent_address').val($('#contact_attributes').val());
}
});