Change select element option with javascript - javascript

I search a lot and no code works for this problem.
I have a select element
$(document).ready(function() {
$('#clientbutton').click(function(e) {
$("input#citycode").value(example :2);
}
}
<select id="citycode">
<option value="1">city 1</option>
<option value="2">city 2</option>
<option value="3">city 3</option>
</select>
But I can't change it with javascript on the client side. I try many other solution in Stackoverflow, but none of them worked.

Change this line
$("#citycode").value(example :2);
to
$("#citycode").val(2);
Supposed you have an element with id clientbutton.
Update: #citycode is a select element, not a input element. David Thomas is right.

Related

Change option background color for individual select2 boxes?

I have used select2 plugin. I need to add the new class in
.select2-results .select2-highlighted class for override the background color.
Can anyone please tell me the solution.
You want to color different select2 boxes different colors. select2 actually makes this a bit difficult because of the format of the generated html and the way it is added to your document:
From the Docs:
By default, Select2 will attach the dropdown to the end of the body and will absolutely position it to appear below the selection container.
When the dropdown is attached to the body, you are not limited to just displaying the dropdown below the container. Select2 will display above the container if there is not enough space below the container, but there is enough space above it. You are also not limited to displaying the dropdown within the parent container, which means Select2 will render correctly inside of modals and other small containers.
This apparently helps select2 work better in modals and such but it bones you because the "parent" element doesn't mean jack now,....ie - styling descendants of the original select's parent wont help you.
However, the dropdownParent option lets you specify where the generated html should be added...so we can work with that instead.
The basic idea is to add a data-select2-container="" attribute to each select whose select2 counterpart should be colored differently. The code will then create an div with the class specified in the attribute and add it after the original select then append the select2 box as a child of that added div thus allowing you to style the elements as children of a div with the specified class:
$(function () {
$(".select2").each(function(i,e){
$this = $(e);
if($this.data('select2-container')){
// if a container was specified as a data attribute, create that container and add it after the current raw select element
// the value set for `data-select2-container` will be used as the class for the container
$('<div class="'+$this.data('select2-container')+'"></div').insertAfter($this);
$this.select2({
placeholder: 'Select an option...',
dropdownParent:$this.next() // set the parent for the generated html to the element we created
});
}
else $this.select2({ placeholder: 'Select an option...'}); // handel cases where a container was not specified
});
});
.orange .select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: orange;
}
.red .select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: red;
}
.green .select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>
<div class="container1">
<select class="select2" data-select2-container="orange">
<option></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select><br>
<div class="container2">
<select class="select2" data-select2-container="green">
<option></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select><br>
<select class="select2" data-select2-container="red">
<option></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
</div>
</div>
<br>
Important notes:
This code will only work if you are using the full version of select2 4.0.0 (and the CSS to go with it )
Elements added like this may not function as expected if they are in a modal (judging by the comments in the docs, not tested)
This is one of those cases where I might would just download the plugin and edit it so that it has this functionality natively, I cant image why the author didnt include an option for this...

How to get all select elements having their with multiple selection criteria, jquery?

How to get all dropdowns having on the basis of multiple attributes name and value.
$('input[name="ABC"][value="-1"]') this expression seems to work, but for drop downs this doesn't seems working.
<select name="department" />
<option value="-1" selected="selected">Select One</option>
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
</select>
alert($("select[name=department][value=-1]").length);
gives 0 in alert box.
refer to this fiddle.
http://jsfiddle.net/8QBH7/
alert($("select[name=department] option[value=-1]").length);
I believe this is the query you're looking for:
$("select[name='department'] option[value=-1]")
See fiddle demo
Edit based on your feedback I think you want to use the selected pseudo class. Fiddle
alert($("select[name=department] :selected").val());
$("select").on("change",function(){
alert($("select[name=department] :selected").val());
});

Remove items from or add items to a select box?

How to remove items (value="0") from select box?
Below is an example select box.
<select class="form-select" name="column" id="edit-column">
<option value="-1">Search All Columns</option>
<option value="0">option 1</option>
<option value="1">option 2</option>
</select>
my JavaScript is not working
$('#edit-column option[value="0"]').remove();
Your JavaScript is fine -- you're probably just running it before the DOM is fully loaded.
So, as PSL mentioned in the comments, you have to use something like this in jQuery:
$(function(){
$('#edit-column option[value="0"]').remove();
});
Which is really just shorthand for:
$(document).ready(function() {
$('#edit-column option[value="0"]').remove();
});
Here's the updated fiddle.

on option item is selected

EDIT:
I forgot http:// on the links. This is not my problem. I'll fix the question...
i have some options, like this:
<select class="mySelect">
<option value="http://www.url1.com">Url 1</option> <!--Default displayed--->
<option value="http://www.url2.com">Url 2</option>
<option value="http://www.url3.com">Url 3</option>
</select>
To this i have a jquery listener, looks like this:
$('.mySelect').change(function(){
window.location.replace($(this).val());
});
Since this just responds to a change made, i can't be redirected to "www.url1.com". What should i use? I only get suggestions for change on google.
EDIT 2: I've got a bunch of solutions on using a dummy as first option. I also got the other solution of using a button to read the selected option and then redirect, but that's not usable in the project i'm working on, even if these are really good solutions otherwise.
In this case, i want it to listen for usage, even if the change is made to itself, like i'm selecting the first option (that's selected by default) i want it to do something with it - In the case above a redirect. I'll leave it open if someone have a good solution to this problem.
Try putting in an empty valued first option:
<select class="mySelect">
<option value="">Please select...</option>
<option value="http://www.url1.com">Url 1</option>
<option value="http://www.url2.com">Url 2</option>
<option value="http://www.url3.com">Url 3</option>
</select>
You can then amend your jQuery to make sure there is a value before redirecting:
$('.mySelect').change(function(){
var value = $(this).val();
if (value != "") {
window.location.replace(value);
}
});
Example fiddle
Note also that http:// (or whichever protocol you're using) is required on the link values.
Updated
If you would prefer to not have the dummy option, you would need to change the logic to work on button click:
<select class="mySelect">
<option value="http://www.url1.com">Url 1</option>
<option value="http://www.url2.com">Url 2</option>
<option value="http://www.url3.com">Url 3</option>
</select>
<button id="redirect">Go</button>
$("#redirect").click(function() {
window.location.replace($(".mySelect").val());
});
You have to put http:// also
window.location.replace("http://"+$(this).val());
One option can be that you change the first option like
<select class="mySelect">
<option value="select">Select URL</option> <!--Default displayed--->
<option value="www.url1.com">Url 1</option>
<option value="www.url2.com">Url 2</option>
<option value="www.url3.com">Url 3</option>
</select>
or you can use click jquery event for combo box .
<form>
<select class="mySelect">
<option value="" selected="selected">Please Select</option>
<option value="www.url1.com">Url 1</option>
<option value="www.url2.com">Url 2</option>
<option value="www.url3.com">Url 3</option>
</select>
</form>​
$(".mySelect").change( function() {
var n = $(this).val();
if(n != "") {
window.location.assign("http://"+n);
}
});​

select box manipulation

I would like to dynamically change the option value of a select tag. Is this possible? When I say value, I mean the "Change Me" portion. If this is possible, can someone please show me how?
<option value="0">Change Me</option>
You can fetch and modify the combobox item's text as follows:
$("#MyCombo option:selected").text()
Note: #shaz; thanks for your comment, my mistake!
Yes it is possible
You will need to look at the options available using a select tag.
<select id='selection'>
<option value='0'>Value 0</option>
<option value='1'>Value 1</option>
<option value='2'>Value 2</option>
<option value='3'>Value 3</option>
<option value='4'>Value 4</option>
<option value='5'>Value 5</option>
</select>
the javascript
var select = document.getElementById('selection');
// to get the currently selected item, use the `selectedIndex` property.
var index = select.selectedIndex; // 3 in case of value 2 selected
// to change its text
select.options[index].innerHTML = 'the new value';
is this what u are looking for?

Categories

Resources