Javascript set default value on dropdownlist not working - javascript

<select id="modalAdd_DDLSample"> </select>
<option value=0> PC</option>
<option value=1> MAC </option>
<option value=2> Rasberry </option>
$("#modalAdd_DDLSample").val("1");
$("#modalAdd_DDLSample").val(1);
$("#modalAdd_DDLSample").val('1');
$("#modalAdd_DDLSample").val("1");
$('#modalAdd_DDLSample option[value="1"]').attr("selected",true);
$('#modalAdd_DDLSample option[value="1"]').attr("selected","selected");
I have tried many ways to set dropdownlist value to default value 1(MAC) when form is load but none of them works, did I missed something important? Appreciate your help

<select id="modalAdd_DDLSample">
<option value="0"> PC</option>
<option value="1"> MAC </option>
<option value="2"> Raspberry </option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
let value="1";
$("#modalAdd_DDLSample").val(value);
</script>

Put the options into the select and write selected in the one you want default.
<select id="modalAdd_DDLSample">
<option value=0> PC</option>
<option value=1 selected> MAC </option>
<option value=2> Rasberry </option>
</select>

Your select code is wrong, the options should be written inside select tag.
This is the html code.
<select id="modalAdd_DDLSample">
<option value=0> PC</option>
<option value=1> MAC </option>
<option value=2> Rasberry </option>
</select>
don't forget to include the jquery library
this is the javascript code
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(function(){
$("#modalAdd_DDLSample").val(1);
});
</script>
When the page is loaded, it will automatically set modalAdd_DDSSample value to MAC.

Your JS Code is right but you have issue in the HTML code
Check Out the code example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</head>
<body>
<select id="modalAdd_DDLSample">
<option value=0> PC</option>
<option value=1> MAC </option>
<option value=2> Rasberry </option>
</select>
<script>
$(function(){
$("#modalAdd_DDLSample").val("1");
});
</script>
</body>
</html>

Related

Using jQuery to build on existing functionality to code to also check if any input boxes have values

I really need your help here. Just a heads up that I am newcomer to the jQuery library.
That out of the way, I would like to get some help to so as to build onto my existing code (the codes existing purpose in my post is to check and see if any of the select boxes have any selected option values, attached to an on change event, so if any of the select boxes have any selected option values then enable the search button, if not, then just keep it nicely disabled.
Now, here's where it gets really tricky for me, how can the existing code be modified so as to also check (in parellel to the code below) to check and see if any input boxes also have any input values,
So the expected outcome for a typical scenario is this, if the user has made a selection in any of the select boxes or has typed in any text in the form, then enable the search button, if the form contains no selected options and all of the input boxes are empty, then disable the #search button.
Here's both the HTML Markup and Code in question:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jq/jquery.js"></script>
<script type="text/javascript">
window.onload = function() {
$('#myform').on('change', function() {
var form = $(this);
form.find('#search').prop('disabled', form.find('select option:selected').filter(function() {
return this.value.length;
}).length === 0)
}).change();
}
</script>
</head>
<body>
<form id="myform">
Cars
<select id="car">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br><br>
Fruits
<select id="fruits">
<option value=""></option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="pear">pear</option>
<option value="strawberry">strawberry</option>
<option value="mango">mango</option>
<option value="orange">orange</option>
</select>
<br><br>
Vegetable
<input type="input" id="veggie">
<br><br>
Number
<input type="input" id="number">
<br><br>
<input type="button" value="search" id="search" disabled>
</form>
</body>
</html>
Have generalized function to test all the input;
Consider $(':input:not([type="button"])') to select all the inputs excluding button
window.onload = function() {
var validateForm = function() {
return $(':input:not([type="button"])').filter(function() {
return this.value !== '';
}).length;
}
$('#myform').on('change keyup', ':input', function() {
$('#search').prop('disabled', !validateForm());
}).change();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="myform">
Cars
<select id="car">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br>
<br>Fruits
<select id="fruits">
<option value=""></option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="pear">pear</option>
<option value="strawberry">strawberry</option>
<option value="mango">mango</option>
<option value="orange">orange</option>
</select>
<br>
<br>Vegetable
<input type="input" id="veggie">
<br>
<br>Number
<input type="input" id="number">
<br>
<br>
<input type="button" value="search" id="search" disabled>
</form>

select2 bootstrap sizing issue

I am trying to use a multiple select2 select form in my html with bootstrap. But I'm having issue with sizing, the select2 box is not working with the grid, and it also gurbles the size of next item. The html
<div class="select2-container col-md-11">
<select class="form-control s2" id="complaint" multiple="multiple" name=
"complaint[]">
<option value="bad_breath">
Bad Breath
</option>
<option value="bleeding_gum">
Bleeding Gum
</option>
<option value="swollen_gum">
Swollen Gum
</option>
<option value="gum_pain">
Gum Pain
</option>
<option value="loose_teeth">
Loose Teeth
</option>
<option value="sensitive_teeth">
Sensitive Teeth
</option>
<option value="darkened_teeth">
Darkened Teeth
</option>
<option value="damaged_teeth">
Damaged Teeth
</option>
</select>
</div>
The JS
<script type="text/javascript">
$(".s2").select2({
closeOnSelect: false
});
$(document).ready(function() {});
Full code here http://www.codeply.com/go/Ly1UHW2HT2
First Add in your select box : <select data-width="100%"></select>
Add This JS and CSS in you header :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
to fix the layout (widths not correct) you need to wrap the contents in a form-group:
<div class="form-group">
<label class="col-md-1 control-label" for="select">Label</label>
<div class="select2-container col-md-11">
<select id="select" class="form-control s2" multiple="multiple" name="name[]" data-width="100%">
<option value="o1">Option 1</option>
<option value="o2">Option 2</option>
</select>
</div>
</div>
Re the JS, I think there is an issue with codeply as copying the html and js and referencing the scripts and links directly in codepen works. See here for an example.

Hidden value not working in Chosen

If I use combobox like this :
<select>
<option value="select">Select</option>
<option value="one" selected>one</option>
<option value="two" disabled>two</option>
<option value="three" hidden>three</option></select>
</select>
Hidden value working. Value three hidden.
But, I use Chosen like this :
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<select class="chosen-select">
<option value="select">Select</option>
<option value="one" selected>one</option>
<option value="two" disabled>two</option>
<option value="three" hidden>three</option>
</select>
<script type="text/javascript">
$(".chosen-select").chosen();
</script>
Hidden value not working. Value three not hidden.
How do I get Chosen to hide an option with the hidden attribute set as in three?

URL Query string using multiple drop down list selections (ideally PHP?)

I am trying to create a dynamic URL query string on a PHP based shopping cart when a submit button is pressed on a PHP form page where the website user has selected options from multiple drop down menus.
URL Example: www.mydomain.com/index.php?main_page=advanced_search_result&search_in_description=1&keyword=32-C
If you look at the above URL the final section after "&keyword=" should be dynamic, so its basically the URL: www.mydomain.com/index.php?main_page=advanced_search_result&search_in_description=1&keyword="FIRST DROP DOWN BOX"+"-"+"SECOND DROP DOWN BOX SELECTION"
I just have no idea how to script this & how to set the form button to execute the script...PLEASE HELP!!!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Search</title>
</head>
<body>
<form name="form1" method="post" action="">
<select name="BustSize" id="BustSize">
<option value="0" selected="selected">Bust Size</option>
<option value="30">30</option>
<option value="32">32</option>
<option value="34">34</option>
<option value="36">36</option>
<option value="38">38</option>
<option value="40">40</option>
</select>
<select name="CupSize" id="CupSize">
<option value="0" selected="selected">Cup Size</option>
<option value="AA">AA</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="DD">DD</option>
<option value="E">E</option>
<option value="F">F</option>
</select>
<input name="Search" type="button" value="Submit">
</form>
</body>
</html>
This can be done with the support of jQuery. I have created a working script at following url: http://sugunan.net/demo/form1.php . You can see the source code there as it is pure HTML and javascript function. But here I copy the code for your reference.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Search</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$( "#submit_search" ).click(function() {
var url = "http://sugunan.net/demo/form1.php?main_page=advanced_search_result&search_in_description=1&keyword="
url = url + $( "#BustSize" ).val();
url = url + "-" + $( "#CupSize" ).val();
window.location = url;
});
});
</script>
</head>
<body>
<form name="form1" method="post" action="">
<select name="BustSize" id="BustSize">
<option value="0" selected="selected">Bust Size</option>
<option value="30">30</option>
<option value="32">32</option>
<option value="34">34</option>
<option value="36">36</option>
<option value="38">38</option>
<option value="40">40</option>
</select>
<select name="CupSize" id="CupSize">
<option value="0" selected="selected">Cup Size</option>
<option value="AA">AA</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="DD">DD</option>
<option value="E">E</option>
<option value="F">F</option>
</select>
<input name="Search" id="submit_search" type="button" value="Submit" />
</form>
</body>
</html>
Check the HTML header for the script portion.
You can create an hidden input field named "keyword" in your form:
Attach a handler to the onsubmit event of the form:
<form name="form1" method="post" action="" onsubmit="updateKeyword()">
The updateKeyword function:
function updateKeyword(){
var bustSize = document.getElementById("BustSize").value,
cupSize = document.getElementById("CupSize").value;
document.forms[0].keyword.value = bustSize+"-"+cupSize;
}
Hope this helps.

Hiding/showing the select box options in jquery?

i have below code snippet in jsp
<HTML>
<BODY>
<select id="customerIds" onchange="doOperation()">
<option value="default"> Start..</option>
<div id="action1" class="action1">
<option value="1"> 1</option>
<option value="2"> 2</option>
<option value="3"> 3 </option>
</div>
<div id="action2" class="action2">
<option value="4"> 4 </option>
</div>
<option value="5"> 5 </option>
</select>
</BODY>
</HTML>
on click of certain button, i want to hide the options with id as "action1" and display the options with Id as "action2". So i tried this
$('#action1').hide();
$('#action2').show();
But that did not work.Not getting whats the issue? In firebug when i tried to inspect the select box, i did not find any div tag(i.e
with ids action1/action2 ) above options.
Use below javascript function where showOptionsClass is the class given to each option you want to show. This will
work in cross browser.
function showHideSelectOptions(showOptionsClass) {
var optionsSelect = $('#selectId');
optionsSelect.find('option').map(function() {
return $(this).parent('span').length == 0 ? this : null;
}).wrap('<span>').attr('selected', false).hide();
optionsSelect.find('option.' + showOptionsClass).unwrap().show()
.first().attr('selected', 'selected');
}
You may not have <div> elements within a <select>, see for example this stackoverflow on the topic, which references this bit of the HTML spec.
Further, hiding options isn't cross browser compatible (see this stackoverflow (second answer)), as #Voitek Zylinski suggests, you would probably be better off keeping multiple copies of the select and toggling between them, or if keeping the id attribute is required then maybe even adjusting the innerHtml (yuck...).
You could maybe approach it like:
markup
<select onchange="doOperation()" class="js-opt-a">
<option value="default"> Start..</option>
<option value="1"> 1</option>
<option value="2"> 2</option>
<option value="3"> 3 </option>
</select>
<select onchange="doOperation()" class="js-opt-b">
<option value="default">Start...</option>
<option value="4"> 4 </option>
<option value="5"> 5 </option>
</select>
js
function doOperation() { /*whatever*/}
$(".js-opt-a").hide();
$(".js-opt-b").show();​​
See for example this jsfiddle
Not exactly ideal though!
You can not use div to group but you can assign class to options to group them.
Live Demo
<select id="customerIds" onchange="doOperation()">
<option value="default"> Start..</option>
<option value="1" class="action1"> 1</option>
<option value="2" class="action1"> 2</option>
<option value="3" class="action1"> 3 </option>
<option value="4" class="action2"> 4 </option>
<option value="5" class="action3"> 5 </option>
</select>​
$('.action1').hide();
$('.action2').show();​
You can't group options inside a div. You can group them inside an <optgroup>, but I don't think that's what you're aiming for.
What you should do instead, is to either create two dropdowns that you toggle between or keep one dropdown and repopulate its options.
You can try this code :
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$('.action1').wrap('<span></span>').hide();
});
$("#show").click(function(){
$('.action1').unwrap('<span></span>').show();
});
});
</script>
</head>
<body>
<select id="customerIds" onchange="doOperation()">
<option value="default"> Start..</option>
<option value="1" class="action1"> 1</option>
<option value="2" class="action1"> 2</option>
<option value="3" class="action1"> 3 </option>
<option value="4" class="action2"> 4 </option>
<option value="5" class="action3"> 5 </option>
</select>​
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

Categories