I'm creating a converter and i want to change the options values of the select tag according to the units type for example changing the volume units to length units when i click on length button
but i want to do this via javascript so i don't create page for every unit type, i just click on button and the options values change. is it possible ? Here is the select list i made for Area units.
<select name="updropMenu" id="selections_upper">
<option value="acres">Acres</option>
<option value="ares">Ares</option>
<option value="hectares">Hectares</option>
<option value="square_cm">Square.CM</option>
<option value="square_feet">Square feet</option>
<option value="square_inches">Sqaure inches</option>
<option value="square_meters">Square meters</option>
</select>
How could I prevent style changing of the html select on size attribute changing?
<svg>
<foreignObject>
<select name="select1" onmousedown="if(this.options.length>5){this.size=5;}" onchange='this.size=1;' onblur="this.size=0;">
<option value="1">This is select number 1</option>
<option value="2">This is select number 2</option>
<option value="3">This is select number 3</option>
<option value="4">This is select number 4</option>
<option value="5">This is select number 5</option>
<option value="6">This is select number 6</option>
<option value="7">This is select number 7</option>
<option value="8">This is select number 8</option>
<option value="9">This is select number 9</option>
<option value="10">This is select number 10</option>
<option value="11">This is select number 11</option>
<option value="12">This is select number 12</option>
</select>
</foreignObject>
</svg>
Here is a fiddle, because for some reasons I can not run the html in the SO fiddle.
What I tried to do is to catch all style changes using the Chrome dev tools, but there are too many of them (changes).
I need to change the size so that to be able put a constraint onto the number of the options visible at once in the select.
In order to avoid a possible x-y problem: I need this to make a scrollable dropdown in svg using the foreignObject and html select.
I would like to be able to select only one option at a time.
According to this question, specifically to the answer:
The behavior depends on the browser and cannot he controlled by the author. You can use the size=10 attribute in the element, but it also changes the menu to a listbox so that 10 options will be visible even when the menu is not focused on. To achieve the behavior you describe, you would need to build your own controls using JavaScript and CSS.
I may tell that my question is about preserving the menu and not changing the style to the listbox style.
I was wondering how something like this would work using pure JS or using jQuery (I think if possible through jQuery it would be done faster?). If I have a select drop down list and the user chooses an option, based on that option the next drop down list only has certain options enabled.
Example, I am attending an event in Ontario:
<select name="select_province_dropdown" id="select_province_dropdown" size="1" style="width: 183px;">
<option value="----Select Province----">----Select Province----</option>
<option value="AB">AB</option>
<option value="BC">BC</option>
<option value="MB">MB</option>
<option value="NL">NL</option>
<option value="NS">NS</option>
<option value="ON">ON</option>
<option value="PE">PE</option>
<option value="SK">SK</option>
</select>
<select name="venue_dropdown" id="venue_dropdown" size="1" style="width: 274px;">
<option value="----Select Venue----">----Select Venue----</option>
<option value="Toronto West">Toronto West</option>
<option value="Vancouver">Vancouver</option>
<option value="Edmonton">Edmonton</option>
<option value="Toronto East">Toronto East</option>
</select>
So using the above HTML, I would select "ON" for Ontario, and then only Toronto West and Toronto East should show or be enabled. The selected options do not need to be displayed in any other additional areas, the user just needs to make the selections and then move on in the form. My concern is if I have 300 events across the country that will be a long list to go through even with options disabled.
What I've tried: JSFiddle
The issue I see with what I've tried is that there will be a lot && statements...it works but when I have 30, 50, 100+ events I don't think it'll be ideal, also I don't know what to put in the else if I do use that.
---Background information---
A little background info as to WHY I want to try this incase anyone is wondering. I will eventually have up to 170-200 locations and I think it's easier for our users to select the correct venue by disabling options based on province. Originally I had created separate selects for the venues and then hid them all, and depending on which province you chose the select with the events associated with that province would reveal itself.
The js I have for that:
$('#select_province_dropdown').on('change', function() {
if ($("#select_province_dropdown").val() === "AB") {
$(".hideAB").attr("style", "display: block;");
} else {
$(".hideAB").attr("style", "display: none;");
}
});
Now the issue is that the CMS we're using limits the amount of custom fields we can build for our reports, and we have to pay (a lot) to increase that which is not in the budget at the moment. So while this method is simpler and easier for me to understand, I think the other method above that I am trying to figure out how to do is better cost wise because then we have only two custom fields (two selects) which saves the company money that I don't want them to spend just because I'm such a noob, I'd rather they pay for the additional custom fields for something more important.
Assuming you have the ability to add attributes to the venue dropdown, you can add a data attribute specifying which state the venue should be shown for.
Add some CSS that hides the disabled options and change the JavaScript to show only enable options that have the correct data attribute value.
Here is a demo https://jsfiddle.net/kf5tqdw2/6/
HTML
<select name="select_province_dropdown" id="select_province_dropdown" size="1" style="width: 183px;">
<option value="----Select Province----">----Select Province----</option>
<option value="AB">AB</option>
<option value="BC">BC</option>
<option value="MB">MB</option>
<option value="NL">NL</option>
<option value="NS">NS</option>
<option value="ON">ON</option>
<option value="PE">PE</option>
<option value="SK">SK</option>
</select>
<select name="venue_dropdown" id="venue_dropdown" size="1" style="width: 274px;">
<option value="----Select Venue----">----Select Venue----</option>
<option data-for="ON" value="Toronto West">Toronto West</option>
<option data-for="BC" value="Vancouver">Vancouver</option>
<option data-for="AB" value="Edmonton">Edmonton</option>
<option data-for="ON" value="Toronto East">Toronto East</option>
</select>
JavaScript
$('#select_province_dropdown').on('change', function() {
var state = $("#select_province_dropdown").val();
$("#venue_dropdown option").attr("disabled","disabled");
$("#venue_dropdown option[data-for='" + state + "']").removeAttr("disabled");
});
CSS
option[disabled] {
display: none;
}
You can use an 'onclick' function in each option.
<option onclick='show(this)' data-id1='AB' value="AB">AB</option>
Then your 'show function' would set the second menu with the option "id='whatever'" to
style='display:block'
where it was previously set to display:none
I hope this simple solution helps you out.
Set a class on all of your venue locations that matches the province they're located in:
<option class="ON" value="Toronto West">Toronto West</option>
When you select a province pull the value, disable all of the venues then re-enable only the venues that have a class matching the option value.
If I understand the requirement and constraints correctly, and building on #Josh Cronin's solution ...
You might consider showing/hiding #venue_dropdown options, rather than enabling/disabling.
The code is fairly straightforward ...
jQuery(function($) {
var $venue_dropdown = $('#venue_dropdown');
$('#select_province_dropdown').on('change', function() {
$venue_dropdown.get(0).selectedIndex = 0; // select the ----Select Venue---- option
$venue_dropdown.find('option')
.not(':first') // ignore the ----Select Venue---- option
.hide() // hide all venue options
.filter("[data-for='" + $(this).val() + "']") // select venues in the selected Province
.show(); // show selected venues
}).trigger('change'); // initialise #venue_dropdown in accordance with #select_province_dropdown's initial selection
});
DEMO
IMHO this will provide a better User Experience, especially if the list of venues is long.
just like the title says...I have a combobox, whose options are filled with web service call, activated on the click event.
I need to handle that list and make an option of that list (just the one whose value starts with "-" not selectable).
The "-" works a separator between one option group and the second following one.
So let's say I have this combo:
<select id="authority" class="selectauthority" style="width: 300px;" onclick="DisableSpecificOption()" name="authority">
<option value=""> </option>
<option value="001">Federal Bureau </option>
<option value="003">Police </option>
<option value="-1">-</option>
<option value="004">Army </option>
<option value="018">Navy </option>
<option value="018">CIA </option>
<option value="018">NSA </option>
</select>
As far as I know make the option disabled should be enough...I tried several scripts but I wasn't able to obtain my goal.
My Fiddle
Thank you in advance
edit
Since I have to use it in more than one selector and function I wrote a general one.
Updated Fiddle
Hope it helps somebody
Try
$('#authority option[value="-1"]').attr("disabled","disabled")
or
$('#name option:contains("-")').attr("disabled","disabled")
I have a multiselect dropdown menu where each option has a checkbox and more than one option can be selected at once. I'm using a jQuery multiSelect plugin generate the dropdown.
<select id="types" multiple="multiple" size="5">
<option value="">Show All</option>
#{
<option value="Gains">Gains</option>
<option value="Losses">Losses</option>
<option value="Adjustments">Adjustments</option>
<option value="Future">Future</option>
<option value="Deliveries">Deliveries</option>
<option value="Recoveries">Recoveries</option>
<option value="Full Payout">Full Payout</option>
<option value="Early Payout">Early Payout</option>
<option value="Charge Offs">Charge Offs</option>
<option value="Returns">Returns</option>
<option value="Transfers">Transfers</option>
<option value="Ins. Write-offs">Ins. Write-offs</option>
}
</select>
What I need to be able to do is separate the options into 2 sections. The first 4 in a section and the last 8 in a section. If an option is selected in one section, then any options that are selected in the other section are then unselected. This is already setup in a C# .NET application. I am having to replicate the functionality. I don't have access to the .NET code. At first I thought maybe I could put the different options into separate divs and just check whether an option was selected in each div but I get validation errors when I try to do that. I'm not really sure what else I could try. Any help with this would be great. Thanks.
try using classes, attach a jquery check box click(), check for class if ( $(this).hasClass("checkboxSection1") ) then uncheck all the other ones like so $(".checkboxSection2").prop('checked', false);
so some simple code is
$("myForm :checkbox").click( function(){
$(this).hasClass("checkboxSection1")?
$(".checkboxSection2").prop('checked', false):
$(".checkboxSection1").prop('checked', false);
});
How about giving them a set of classes e.g. 'option1' & 'option2', then you can do a little javascript/jquery to handle the logic of the selection process...