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.
Related
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.
I am trying to toggle ng-selected options in Angular, but am running into some difficulty. Here's what I'm trying:
<select ng-model="datacut.ages" multiple>
<option value="" disabled="disabled">Please Select</option>
<option value="0-15" ng-click="toggleSelect(datacut, '0-15')" ng-selected="datacut.ages.indexOf('0-15') !== -1">15 and Younger</option>
<option value="16-19" ng-selected="datacut.ages.indexOf('16-19') !== -1">16 - 19</option>
<option value="20-24" ng-selected="datacut.ages.indexOf('20-24') !== -1">20 - 24</option>
</select>
Controller:
$scope.toggleSelect = function(dc, str){
dc.ages.splice(dc.ages.indexOf(str), 1);
//e.currentTarget.selected = !e.currentTarget.selected;
};
The problem is that when I click on an option gets selected on mousedown, and on release gets unselected. The commented out code also does the same thing.
I feel like this should have a simple solution, but I can't really figure out an elegant solution.
Any help would be much appreciated.
Edit: For clarification - I need to be able to have nothing selected, so clicking a single selected element needs to unselect it. I also need to be able to select multiple options.
Your are using ng-model which does the magic for you. So ng-click and ng-selected is not necessary. See my working fiddle
<select ng-model="datacut.ages" multiple>
<option value="" disabled="disabled">Please Select</option>
<option ng-value="'0-15'">15 and Younger</option>
<option ng-value="'16-19'" >16 - 19</option>
<option ng-value="'20-24'" >20 - 24</option>
</select>
It looks like you want to remove the selected age from the ages model. Then you need to use the ng-change directive. And remove the ng-click or ng-selected. But leave the ng-model to access the value on the method that remove the selected item.
See my plunker
<select multiple name="ages" unseletable forbiden-opt="datacut.MIN_AGE" ng-model="datacut.chosenAge">
<option value="" disabled="disabled">Please Select</option>
<option ng-repeat="age in datacut.ages" value="{{age}}">
{{age}}
</option>
</select>
EDIT: This should be made in a directive because you need to update the option html to unselect the option.
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());
});
The following multi-select control needs to be used to update a url hash containing a comma-separated list of ids.
<select id="options" multiple>
<option id="1">Option 1</option>
<option id="2">Option 2</option>
<option id="3">Option 3</option>
<option id="4">Option 4</option>
<option id="5">Option 5</option>
<option id="6">Option 6</option>
<option id="7">Option 7</option>
</select>
In the example below, Options 2, 3, and 4 are selected in the multi-select control. Selecting and un-selecting options in the multi-select control should update the url hash accordingly.
http://localhost/index#options=2,3,4
I have created a fiddle with the multi-select control but do not know how best to approach the url hash change. I have tried using an href to change the hash but that is not supported within an option tag, and does not provide the logic needed to update the hashes accordingly.
Fiddle
Please let me know if I provide any additional information.
Part of your issue is that in JSFiddle you won't be able to see the hash.
That said if you listen for changes on the <select> you can concatenate the array of values into a string using join() and then set this as a has using window.location.hash.
You could so something like this (based on #popnoodles code)
$( '#options' ).on( 'change', function() {
window.location.hash = $( this ).val().join( ',' );
});
Working demo
Ok without interfering with any of that plugin code
First you need to address your options
use this: <option value="1">Option 1</option>
not this: <option id="1">Option 1</option>
Then this jQuery will do what you want.
$('#options').on('change', function(){
var val=$(this).val();
if (val) hash=val.join(','); // join fails if .val() is null (nothing selected)
else hash='';
window.location.hash=hash;
});
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);
}
});