I'm fixing a horrendous bug in an old web application. For some datasets, the values in an option/select list are unfortunately not unique. But luckily, the custom attribute test is unique.
So I have the following HTML structure:
<select id="dropdown">
<option value="1" test="A">fooA</option>
<option value="2" test="B">fooB</option>
<option value="2" test="C">fooC</option>
<option value="2" test="D">fooD</option>
<option value="2" test="E">fooE</option>
</select>
So I wonder how could set C from the custom attribute test with the help of Jquery or vanilla JS in the select/dropdown field? The .attr() property only changes the properties of the custom attribute test, which I not want. I want to set fooC in the select field.
JSFiddle link to try: http://jsfiddle.net/rnnfk/120/
First you need to select the attribute with the help of css attribute selector then add selected attribute using attr().
Try this technique. Demo
$('#dropdown option[test=C]').attr( "selected","selected");
You can use attribute selector to get the option with attribute test with specific value.
Live Demo
$('#dropdown option[test=C]').prop('selected', true);
Just add following code in jquery :-
$("#dropdown [test='C']").attr("selected", "selected");
It may help you.
Related
I'm just starting with Angular JS and i find it very handy in terms of data handling.
My question, is it possible to bind a custom attribute by html alone? Specifically with the select element.
Instead of getting the value attribute, i want to get a custom attribute from the option tags under select element.
Just to be clear, instead of displaying the "value" of the input element, i want to display what's inside the data-custom1 which is the word "payment".
Example would be:
<select ng-model="colors">
<option data-color-hex="#2ba2ba" value="1"> Color A<option>
<option data-color-hex="#222222" value="2"> Color B<option>
<option data-color-hex="#cacaca" value="3"> Color X <option>
</select>
<p>{{display the data-color-hex value here}} </p>
If i select an option from the select element, the data-color-hex is displayed
in the element instead of value 1,2,3.
You first need to set a name for your select:
<select name="colors" ng-model="$ctrl.colors">
<option value="1" data-custom1="paymentA">1</option>
<option value="2" data-custom1="paymentB">2</option>
<option value="3" data-custom1="paymentC">3</option>
</select>
Then, you can create a method in your ctrl which returns the data-custom1 attribute from the selected option:
$ctrl.getDataCustomFromSelect = function(selectName) {
return document.querySelector('select[name="' + selectName + '"] option:checked')
.getAttribute('data-custom1');
}
You can get that in your template doing:
<p ng-bind="$ctrl.getDataCustomFromSelect('colors')"><p>
Fiddle with that solution: https://jsfiddle.net/virgilioafonsojr/b002ccja/
I hope I understood your problem correctly and it solves the issue.
Two ways to do this, and you'll probably want to use the first:
<input ng-model="amount" data-custom1="{{payment}}">
<p>{{payment}}<p>
Or by using ngAttr:
<input ng-model="amount" ng-attr-payment="{{payment}}">
<p>{{payment}}<p>
The latter one is used for picky DOM APIs like the SVG DOM API. You can read more here: https://docs.angularjs.org/guide/interpolation
If you want get the input value, you have to use ng-model, only this.
And then, in your controller.js, get the input value from ng-model.
(I don't know if that's what you want to know)
I have a form that use jquery mobile to generate. I have a dropdown list that initially set to be disabled.
<div data-role="fieldcontain">
<label for="role-edit" class="select">Project Role:</label>
<select name="role-edit" id="role-edit" data-native-menu="false" disabled="disabled" class="edit-projectinput">
<option value="Admin">Admin</option>
<option value="Project Manager">Project Manager</option>
<option value="User">User</option>
</select>
</div>
I would like to enable the disabled selectmenu using jquery.
I tried
$(".edit-projectinput").selectmenu("enable");
But it doesn't work for me.
Could you please instruct me how to enable the disabled selectmenu, and if possible, show me how to disable one.
This is the demo: http://jsfiddle.net/lightbringer/dpv2h/1/
Just do :
$(document).ready(function(){
$("select.edit-projectinput").selectmenu("enable");
});
Demo
Remeber than there will be 2 items with the class .edit-projectinput one the real select that is converted to select menu widget and then the one default selected span element in the widget, so just specifically select the one that matters. Your menu is already initialized just a matter of calling enable method on it.
You have to intialize selectmenu first,
$(".edit-projectinput").selectmenu().selectmenu("enable");
and also use unique class name for the select options.
I know this is an older post, but came across the same issue in my code and found the issue, so posting here for others. Everything I saw online said to use:
$("selectId").selectmenu("disable");
It didn't work. No error, just not disabling the menu.
The fix was a simple # before the ID:
$("#selectId").selectmenu("disable");
Now it disables, no issue :)
Edit:
Thanks everybody, but nothing seems to work. I am inserting this code in a file that I know is being used and that contains other javascript blocks normally formatted, and this still doesn't work. It works in a fiddle, but not on my code. I guess this is too specific to the platform and extension that I'm trying to modify (this is part of a Magento checkout step modified by a third party extension). I will start looking into replacing the list with a manually generated one. Thanks again.
I am trying to hide an option in a dropdown list that is dinamically generated. The CSS solution doesn't work on all browsers, and even though I have found several similar questions here, neither one offers a solution that works for me.
Here's what my list renders like:
<select id="timeselect" name="adj[delivery_time][]" title="El plazo de la entrega" class="adjtimeselect select" type="time" ><option id="option-10" value="10" >10</option>
<option id="option-11" value="11" >11</option>
<option id="option-12" value="12" >12</option>
<option id="option-13" value="13" >13</option>
<option id="option-14" value="14" >14</option>
<option id="option-15" value="15" >15</option>
<option id="option-16" value="16" >16</option>
<option id="option-17" value="17" >17</option>
<option id="option-18" value="18" >18</option>
<option id="option-19" value="19" >19</option>
<option id="option-20" value="20" >20</option>
</select>
I need to hide the option with value "12" for example.
I am using this JS:
$("#timeselect option[value='12']").remove();
Any advice would be greatly appreciated since I'm new to JS.
Thanks.
Use the hide() function of JQuery: jsFiddle
You can use show() to get it back
Jquery remove by value
$("#timeselect option[value=11]").remove();
Jquery remove by Text
$("#timeselect option:contains(11)").remove();
Jquery to hide a select box option with its value using css
$("#timeselect option[value='11']").hide();
or
$("#timeselect option[value='11']").css('display','none');
I tried in many different ways but this solution seems reasonable and cross browser compatible and I have used in my code. No plugins required simple register function with jquery object
Solution at glance:
(function ($) {
$('#showOne').click(function () {
$('#ddlNumbers').showHideDropdownOptions('3', true);
});
$('#hideOne').click(function () {
$('#ddlNumbers').showHideDropdownOptions('3', false);
});
$.fn.showHideDropdownOptions = function(value, canShowOption) {
$(this).find('option[value="' + value + '"]').map(function () {
return $(this).parent('span').length === 0 ? this : null;
}).wrap('<span>').hide();
if (canShowOption)
$(this).find('option[value="' + value + '"]').unwrap().show();
else
$(this).find('option[value="' + value + '"]').hide();
}
})(jQuery);
Here is the complete implementation http://jsfiddle.net/8uxD7/3/
You can use jQuery remove() function. if you want to remove it permanently from DOM, or if you want to remove and reinsert it use detach()
$("#timeselect option[value='12']").remove();
Or Detach
var value = $("#timeselect option[value='12']").detach();
And reinsert it by using
$("#timeselect").append(value);
http://jsbin.com/iHIrAQE/5/edit
See the example
Another way is you can disable the value so user can see but cannot select
$("#timeselect option[value='12']").attr('disabled','disabled');
I have the following list:
<select name="formulas">
<option value="1" >Lorenz</option>
<option value="2" selected="selected">Lorenz advanced</option>
<option value="3" >Body Mass Indice</option>
<option value="4">Pende</option>
<option value="5">Broca</option>
</select>
Which I try to access with the following method I wrote and in which I use JQuery 1.9.0
function calc()
{
var method = $("#formulas option:selected").text();
alert(method);
var number = $("#formulas option:selected").val();
alert(number);
}
Which return in order a empty string and undefined, I know there are multiple questions regarding this topic on Stack Overflow but I've tried them all and nothing works.
JQuery works I used it in other methods to append some text to a div.
Does anyone have a ideea on how to get this to work ?
You're selecting your select by id but it has only a name. Change
$("#formulas option:selected")
to
$("select[name=formulas] option:selected")
Or, better, give it also an id :
<select id=formulas name="formulas">
you have use 'formulas' as name
<select name="formulas">
and using jquery select as id
$("#formulas option:selected").text();
give select id="formulas", it will work.
I have a select with some values in it. each value loads a different webpage.
I want the default value that always shows to be "Select page".
How can I highlight the option for the current page when the user clicks on the dropdown?
By highlight i mean either have it selected or change its background colour or something.
HTML:
<select id="siteId" name="siteId" onchange=".....">
<option value="">Select a page</option>
<option row="1" value="68067">MAIN SITE</option>
<option row="2" value="88616">A</option>
<option row="3" value="88617">B</option>
</select>
EDIT: this select is created dynamically. I can only edit it with java-script after the page renders
If you are looking for jQuery solution then :eq() and attribute selector will be your best bet to look for. I have done something: http://jsbin.com/ojexuh/1/edit
first with :eq()
$('select option:eq(2)').css({"background":"green", "color":"white"});
and attribute selector like this one:
$('select option[row="1"]').css({"background":"red", "color":"yellow"});
option does support background colors within a select. I just set up a simple class to highlight it, as seen via here.
You can add a class like this
$('current page selector').addClass('current');
You could also just manually set it with the css function
$('current page selector').css('background-color', 'red');
You don't really have enough information for me to help you determine how to find the current page. I recommend having some way to tell from the value of the option that you can compare to the current window.location.
There's a lot of variability in browser+OS support for this. Taking Chrome as an example, the dropdown doesn't appear to accept any styling on OS X, but on Windows, background colors can be assigned both in a stylesheet and inline style attribute:
<style type='text/css'>
.highlighted {
background-color: yellow;
}
</style>
<select name='whatever'>
<option value='1'>one</option>
<option value='2'>two</option>
<option value='3' style='background-color: green;'>three</option>
<option value='4' class='highlighted'>four</option>
</select>
Again, both methods work on windows, neither on OS X.
If you want a solution that works everywhere, you need to build your own dropdown control.
Set selected="selected" for the option you want to be the default.
<option row="3" value="88617" selected="selected">B</option>