I have a drop down list of options which lets my users choose one of a few options. But I want to also include a button that when pressed will select a specific option out of the dropdown list.
This is working but the issue is that the dropdown list isnt showing the updated selection, but if you click on the dropdown list you can see that the selection the button chose is highlighted and is indeed selected.
function onclick() {
document.form.server_select.value = 'Quebec';
}
<select name="server_select" id="server_select">
<option value="random" selected>Auto Select</option>
<option value="Quebec">Quebec</option>
<option value="NewYork">NewYork</option>
<option value="Seattle">Seattle</option>
<option value="France">France</option>
</select>
<button onclick="onclick()">Button</button>
When you load the page the first option is displayed in the drop down to the user as seen
and
After pressing the button the dropdown still shows the first option in the list but when clicking onto the dropdown you can see a different option is selected.
I expected the dropdown to also show the new selection.
The code works as expected:
function change() {
document.getElementById('server_select').value = 'Quebec';
}
<form>
<select name="server_select" id="server_select">
<option value="random" selected>Auto Select</option>
<option value="Quebec">Quebec</option>
<option value="NewYork">NewYork</option>
<option value="Seattle">Seattle</option>
<option value="France">France</option>
</select>
</form>
<button onclick="change()">Button</button>
But looking at the screenshots, it looks like they are doing a custom dropdown, basically you are clicking on a transparent select, and they are updating their pretty dropdown manually, something like this:
function change() {
document.getElementById('server_select').value = 'Quebec';
}
function change2() {
element = document.getElementById('server_select')
element.value = 'Quebec';
var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('change', true, true, window);
element.dispatchEvent(event);
}
function open() {
document.getElementById('server_select').value = 'Quebec';
}
document.getElementById('server_select').addEventListener('change', function(event) {
document.getElementById('value').innerHTML = event.target.value
})
#dropdown {
position: relative;
}
#server_select {
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<form>
<div id="dropdown">
<span id="value">Auto Select</span>
<select name="server_select" id="server_select">
<option value="random" selected>Auto Select</option>
<option value="Quebec">Quebec</option>
<option value="NewYork">NewYork</option>
<option value="Seattle">Seattle</option>
<option value="France">France</option>
</select>
</div>
</form>
<button onclick="change()">Button</button>
<button onclick="change2()">Button Fixed</button>
You'll have to look at the actual HTML structure of your document to see what you need to update, but use the Button Fixed example to see (basically) what you need to do.
You should avoid using reserved words such as onclick as function name
for list of reserved words please look into https://www.w3schools.com/js/js_reserved.asp
function change() {
document.getElementById("server_select").value = "Quebec";
}
<select name="server_select" id="server_select">
<option value="random" selected>Auto Select</option>
<option value="Quebec">Quebec</option>
<option value="NewYork">NewYork</option>
<option value="Seattle">Seattle</option>
<option value="France">France</option>
</select>
<button onClick="change()">Button</button>
<script>
</script>
Related
I have a job that requires several hundred select elements on a page. I want to show each select dynamically as the previous is changed. I have a working version in which I put all the select elements in the markup, and then used a simple function to hide them all and show only the first. Then on change of each select the next is added.
This works just fine, but is obviously not ideal. I don't want to put 500 select items in the markup and hide them all for no reason, and my JS function would be 1500 lines long. Plus that would make me feel silly.
How can I automate this process with JS?
I do not need each select to have a unique id, but I do need each select to have a unique and incremented name. Is this possible? I have a working fiddle.
HTML:
<select name="select-one" class="hidden" id="one">
<option value="">not this one</option>
<option value="">pick this one</option>
</select>
<select name="select-two" class="hidden" id="two">
<option value="">not this one</option>
<option value="">pick this one</option>
</select>
<select name="select-three" class="hidden" id="three">
<option value="">not this one</option>
<option value="">pick this one</option>
</select>
<select name="select-four" class="hidden" id="four">
<option value="">not this one</option>
<option value="">pick this one</option>
</select>
JS:
$(document).ready(function() {
$('.hidden').hide();
$('#one').show();
$('#one').change(function(){
$('#two').show();
});
$('#two').change(function(){
$('#three').show();
});
$('#three').change(function(){
$('#four').show();
});
// and so forth...
});
HTML:
<select class="hidden" id="one" name='name_0'>
<option value="">not this one</option>
<option value="">pick this one</option>
</select>
jQuery
$('select').on('change', function() {
$('body').append($(this).clone(true))
})
Result:
Note we are using the overload of the clone() method. This means event handlers and data will be copied along with the elements. So whatever event handler you attached to the original select gets cloned.
If you want to increment the name just use a counter and add the attribute after the clone:
cnt=0;
$('select').on('change', function() {
cnt++
$('body').append($(this).clone(true).attr('name', 'name_' + cnt))
})
My solution:
CSS
.hidden {
display: none;
}
JS
const createSelect = index => `
<select name="select-${index}" class="hidden select" data-index=${index}>
<option value="">not this one</option>
<option value="">pick this one</option>
</select>
`;
$(document).ready(function() {
// Generate 100 selects
for (let i = 0; i < 100; i++) {
$("body").append(createSelect(i));
}
// Show first select
$(`.select[data-index='0']`).show();
$('.select').on('change', function() {
// Store index of a select currently changed
const index = parseInt($(this).attr('data-index'), 10);
// Show next select
$(`.select[data-index='${index + 1}']`).show();
});
});
I have two dynamic dropdowns but both dropdown's value and options are same. What I want that if user select 'apple' from first dropdown then the second dropdown's apple option will be disabled (using javascript). In short user can not select same value from both.
//first drop down
<select name="fruit1">
<option value="1">Apple</option>
<option value="2">Mango</option>
</select>
//second dropdown
<select name="fruit2">
<option value="1">Apple</option>
<option value="2">Mango</option>
</select>
I have tried with jQuery:
function witness()
{
var op=document.getElementById("witness1").value;
$('option[value='+op+']').prop('disabled', true);
}
But with this both dropdown's value are disabled and if I select mango then apple will not enabled it remains disabled. I know I did not pass id so both dropdown value are disabled but where should i pass ?
If user select apple then in second dropdown apple will be disabled, I want to do this using Javascript or jQuery.
Fiddle: https://jsfiddle.net/3pfo1d1f/
To get the functionality you're after, you need to hook into the change event on the first dropdown, in order to disable the matching element in the second drop-down.
I also initialised the first element in the second dropdown as disabled ( as this chosen by default in the first dropdown)
Used jquery as you are:
HTML:
<!-- first dropdown -->
<select id="fruit1">
<option value="1">Apple</option>
<option value="2">Mango</option>
</select>
<br /> <br />
<!-- second dropdown -->
<select id="fruit2">
<option value="1" disabled>Apple</option>
<option value="2">Mango</option>
</select>
JQuery:
$('#fruit1').on( "change", function() {
var op = $( this ).val();
$('#fruit2 option').prop('disabled', false);
$('#fruit2 option[value='+op+']').prop('disabled', true);
});
This should still work, no matter how many options you have in both the dropdowns
Try this out:
HTML:
<select id='fruit1' onchange="witness();">
<option selected></option>
<option value="1">Apple</option>
<option value="2">Mango</option>
</select>
<select id='fruit2'>
<option selected></option>
<option value="1">Apple</option>
<option value="2">Mango</option>
</select>
JQuery:
function witness(){
$("#fruit2 option").each(function(){
if($("#fruit1 option:selected").val() == $(this).val())
$(this).attr("disabled", "disabled");
else
$(this).removeAttr("disabled");
});
}
You can see a working exemple here:
https://jsfiddle.net/mqjxL4n0/
<select name="firstselect" id="firstselect">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
</select>
<select name="secondselect" id="secondselect">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
</select>
<script>
$(document).ready(function(){
$('#firstselect').change(function(){
var firstselected = $(this).val();
if(firstselected ){
$('#secondselect option').each(function(){
$(this).prop('disabled', false);
if($(this).val()==firstselected )
$(this).prop('disabled', true);
});
}
else {
$('#secondselect option').each(function(){
$(this).prop('disabled', false);
});
}
});
});
</script>
I have 2 drop down list
<select id="servergroup" multiple="multiple">
<option value="P1">P1</option>
<option value="P2">P2</option>
<option value="P3">P3</option>
<option value="P4">P4</option>
</select>
<select id="servername" multiple="multiple">
<option value="s597ap233">s597ap233</option>
<option value="s597dp392">s597dp392</option>
<option value="s397dp095">s397dp095</option>
</select>
I want that the second drop down list should get enabled only if we choose a value in the first drop down list. It should again get disabled if we deselect the value from the first drop down list.
May I know how can this be achieved using jQuery?
You can use the disabled attribute and using JavaScript, you can set it as false or true
function check(){
if(document.getElementById('servergroup').value!='')
document.getElementById('servername').disabled=false;
else
document.getElementById('servername').disabled=true;
}
<select onchange="check()" id="servergroup" multiple="multiple">
<option value="P1">P1</option>
<option value="P2">P2</option>
<option value="P3">P3</option>
<option value="P4">P4</option>
</select>
<select disabled id="servername" multiple="multiple">
<option value="s597ap233">s597ap233</option>
<option value="s597dp392">s597dp392</option>
<option value="s397dp095">s397dp095</option>
</select>
$('#bonusVoucher').prop('disabled',false);
jQuery('#bonusVoucher').selectpicker('refresh');
Use selectpicker like this and the most IMPORTANT part is this:
Note: Place your bootsrap selectpicker script after jquery script.
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script>
jQuery solution.
function change() {
if ($('#servergroup option:selected').length) {
$('#servername').attr('disabled', false);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="servergroup" multiple="multiple" onchange='change()'>
<option value="P1">P1</option>
<option value="P2">P2</option>
<option value="P3">P3</option>
<option value="P4">P4</option>
</select>
<select id="servername" multiple="multiple" disabled>
<option value="s597ap233">s597ap233</option>
<option value="s597dp392">s597dp392</option>
<option value="s397dp095">s397dp095</option>
</select>
First add
<option value="-1"> -Select Server Group- </option>
and
<option value="-1"> -Select Server Name- </option>
to Your Dropdown boxes respectively.
We can achieve requested actions using JQuery as Follows:
$(document).ready(function ()
{
//making serverName Dropdown box disabled by default.
$('#servername').prop('disabled', true);
$('#servergroup').change(function ()
{
if($(this).val == "-1")
{
$('#servername').val = "-1";
$('#servername').prop('disabled', true);
}
else
{
$('#servername').prop('disabled', false);
}
});
});
I need to make the text uppercase on the selected option only in a <select>. I found a working example using jQuery but I need to convert it to vanilla JS.
I've actually got it pretty close, when you choose an option, it makes the selected value uppercase. But when you choose another, it leaves the previous option uppercase also.
I can't figure out how to say "Capitalise all options EXCEPT the selected option, which I would like to be uppercase".
Any guidance will be appreciated.
Here is a working Fiddle of where I am so far.
How about just using CSS
* {
font-family: arial;
}
select option {
text-transform: capitalize;
}
select, select option:checked {
text-transform: uppercase;
}
<select name="title" id="title">
<option selected="" disabled="">Categories</option>
<option value="photo-galleries">Photo Galleries</option>
<option value="photography">photography</option>
<option value="romeo-juliet">Romeo & Juliet</option>
<option value="swan-lake">Swan Lake</option>
<option value="symmetries">Symmetries</option>
</select>
<select name="day" id="day">
<option selected="" disabled="">Day of the week</option>
<option value="monday">Monday</option>
<option value="tuesday">Tuesday</option>
<option value="wednesday">Wednesday</option>
<option value="thursday">Thursday</option>
<option value="friday">Friday</option>
<option value="saturday">Saturday</option>
<option value="sunday">Sunday</option>
</select>
Here's a javascript version as well
[].slice.call( document.querySelectorAll('option') ).forEach(ucfirst);
document.getElementById('title').addEventListener('change', fn, false);
document.getElementById('day').addEventListener('change', fn, false);
function ucfirst(el) {
el.innerHTML = el.innerHTML.charAt(0).toUpperCase() + el.innerHTML.slice(1).toLowerCase();
}
function fn() {
var options = this.getElementsByTagName('option');
var selected = options[this.selectedIndex];
[].slice.call(options).forEach(ucfirst);
selected.value = selected.innerHTML = selected.innerHTML.toUpperCase();
}
FIDDLE
I have some JavaScript on a site I am building that I just can't get to not default when another script is used. Interestingly not all of the javascripts on the page cause the issue.
This is the script that I am using:
$(document).ready(function() {
$('.verdana').click(function(e) {
$('#changeMe').css('font-family','verdana');
e.preventDefault();
});
$('.arial').click(function(e) {
$('#changeMe').css('font-family','arial');
e.preventDefault();
});
$('.tahoma').click(function(e) {
$('#changeMe').css('font-family','tahoma');
e.preventDefault();
});
$('.times').click(function(e) {
$('#changeMe').css('font-family','times');
e.preventDefault();
});
$('.copperplatebold').click(function(e) {
$('#changeMe').css('font-family','copperplatebold');
e.preventDefault();
});
$('swiss721').click(function(e) {
$('#changeMe').css('font-family','swiss721');
e.preventDefault();
});
$('.baskerville').click(function(e) {
$('#changeMe').css('font-family','baskerville');
e.preventDefault();
});
$('.oldenglish').click(function(e) {
$('#changeMe').css('font-family','oldenglish');
e.preventDefault();
});
$('.timesnewroman').click(function(e) {
$('#changeMe').css('font-family','timesnewroman');
e.preventDefault();
});
$('.castellar').click(function(e) {
$('#changeMe').css('font-family','castellar');
e.preventDefault();
});
$('.calibri').click(function(e) {
$('#changeMe').css('font-family','calibri');
e.preventDefault();
});
$('.scriptmtbold').click(function(e) {
$('#changeMe').css('font-family','scriptmtbold');
e.preventDefault();
});
$('.lucidacal').click(function(e) {
e.preventDefault(e);
});
// select font in dropdown list to change font-family of #changeMe
$('select').change(function() {
if($(this).val() == "Default font"){
$('#changeMe').css('font-family',"");
} else {
$('#changeMe').css('font-family',$(this).val());
}
});
e.preventDefault(e);
});
Anyway I have tried putting "e.preventDefault(e);" in many places but no joy.
And another possible clue is that it seems to be my javascripts that also use drop down menus for selection that do it.
As always you're all stars for helping out! Thanks in advance!
HTML Elements that default the above script
<div style = "position: absolute; left: 160px; top: 490px;">
<select style="width: 150px;" id = "fonty">
<option selected="selected">Select Your Font....</option>
<option>Times New Roman</option>
<option>Verdana</option>
<option>Copper Plate Bold</option>
<option>Swiss721</option>
<option>Baskerville</option>
<option>OldEnglish</option>
<option>Castellar</option>
<option>Calibri</option>
<option>ScriptMTBold</option>
<option>LucidaCal</option>
<div style = "position: absolute; left: 160px; top: 440px;" >
<select id="selectcolor" name="selectcolor" style="width: 150px;">
<option value="null">Select Text Colour...</option>
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="darkblue">Dark Blue</option>
<option value="pink">Pink</option>
<option value="green">Green</option>
<option value="orange">Orange</option>
<option value="seagreen">Sea Green</option>
<option value="red">Red</option>
<option value="darkgreen">Dark Green</option>
<option value="bergundy">Bergundy</option>
<option value="cyan">Cyan</option>
<option value="magenta">Magenta</option>
<option value="mustard">mustard</option>
<option value="purple">Purple</option>
</select>
</div>
<div style = "position: absolute; left: 160px; top: 540px;">
<select id="category-navbar" name="category-navbar" style="width: 150px;">
<option value="">Motif Set One...</option>
<option value="H">motif 1</option>
<option value="rs">motif 2</option>
<option value="2">motif 3</option>
<option value="y">motif 4</option>
<option value="f">motif 5</option>
<option value="j">motif 6</option>
<option value="m">motif 7</option>
<option value="-,">motif 8</option>
<option value="[">motif 9</option>
<option value=";">motif 10</option>
<option value="V">motif 11</option>
<option value="N">motif 12</option>
<option value="R">motif 13</option>
<option value="]">motif 14</option>
<option value="F">motif 15</option>
<option value="t">motif 16</option>
<option value="">none...</option>
</select>
</div>
and the div for the text that I am affecting:
<!--The address div-->
<div class="selectcolor" style = "position: absolute; left: 425px; top: 360px;"id="changeMe">....please add you address using the box on the left</div>
For you click event handler for swiss721 you are selecting an element with the tag name swiss721, not a class name:
$('swiss721').click(function(e) { // This line
$('#changeMe').css('font-family','swiss721');
e.preventDefault();
});
You should add a period before the selector:
$('.swiss721').click(function (e) {
Additionally, the method preventDefault() does not take in any arguments, but you are passing one to it in a few cases at the end.
Lastly, you have an extraneous e.preventDefault() after your select handler.
After you posted your HTML
You're not being specific with your "select" selector. You have a number of elements, doing different things - only one of which holds values to font families.
Also, you haven't closed the first opening tag in your HTML.
First
It could be a script error being thrown. You have a stray e.preventDefault() at the bottom which isn't a part of any listener.
Second
If this is in an external script (it's own .js file) - make sure you DON'T have the tags in it. If the content is dynamic - Make sure that's considered when this script is loaded/executed.
$('.verdana') won't work because there is no element with a class 'verdana' (at least in your HTML you posted).
You have to listen for the change event on the select element (with id fonty) which contains all the fonts.
$("#fonty").change(function(event) {
var selectedFont = $(this).val();
if (selectedFont == "Verdana") {
$('#changeMe').css('font-family','verdana');
}
else if (selectedFont == "Copper Plate Bold") {
$('#changeMe').css('font-family','copperplatebold');
}
// ......
});
Enhancement suggestion:
you can shrink your javascript code if you set the value of each <option> so that it can be used as the font you pass to $('#changeMe').css("font-family", ...)
HMTL:
<select style="width: 150px;" id = "fonty">
<option selected="selected">Select Your Font....</option>
<option value="verdana">Verdana</option>
<option value="copperplatebold">Copper Plate Bold</option>
<option value="arial">Arial</option>
...
</select>
JS:
$("#fonty").change(function(event) {
var selectedFont = $(this).val();
$('#changeMe').css('font-family', selectedFont);
});