I have a list of excercises in Latex, written inside strings. I wrote a script in php to generate a list of exercises, using:
<button type = "button" onclick = "aggiornaInfo()">Save</button>
<?php
$exercises = array(
"$$\\int_0^1 x^2\\,dx$$",
"Evaluate $$\\int_{-1}^1 e^x\\,dx$$",
"Evaluate $$\\int cos(x)\\,dx$$"
);
$n = 3;
for($i = 0; $i < $n; $i++){
echo "<li><select id='points'>";
for($j = 0; $j <= 10; $j += 0.5){
echo "<option value='$j'>$j</option><br>";
}
echo"</select><input type='checkbox' name='item' value='Exercise " . $i + 1 . "' id = 'checkbox1' style='display: inline-block;'> " . $exercises[$i] . "<br></li><br><hr>";
}
?>
Note that the exercises are both only LaTex (surrounded by double dollar) and also text and LaTex.
My goal is to write the problems i wrote inside a rmd file, and i'm half way but i have found a problem.
I found the way to get the string of every exercise I choose with the checkbox, but when i'm printing it,it will return something i don't want:
Result i want: "$$\\int_0^1 x^2\\,dx$$"
Result i get: '00.511.522.533.544.555.566.577.588.599.510 ∫10x2dx∫01x2dx\\int_0^1 x^2\\,dx'
This is my javascript code:
function aggiornaInfo() {
var items = document.getElementsByName("item");
var checkedItems = [];
for (var i = 0; i < items.length; i++) {
if (items[i].checked) {
var itemName = items[i];
item = itemName.parentElement.textContent.trim();
checkedItems.push(item);
}
}
text += checkedItems.join("\n");
console.log(checkedItems);
Summarizing, i want the exact same string, not a modified one.
Here is an example where I fixed the HTML and wrapped the text in a label
I also use recommended eventListeners
window.addEventListener("DOMContentLoaded", () => {
document.getElementById("save").addEventListener("click", () => {
const checkedItems = [...document.querySelectorAll("[name=item]:checked")]
.map(item => item.nextSibling.textContent);
if (checkedItems.length === 0) return;
// here you have the array
console.log(checkedItems.join("\n"));
});
});
<button type="button" id="save">Save</button>
<ul>
<li>
<select id='points'>
<option value='0'>0</option><br>
<option value='0.5'>0.5</option><br>
<option value='1'>1</option><br>
<option value='1.5'>1.5</option><br>
<option value='2'>2</option><br>
<option value='2.5'>2.5</option><br>
<option value='3'>3</option><br>
<option value='3.5'>3.5</option><br>
<option value='4'>4</option><br>
<option value='4.5'>4.5</option><br>
<option value='5'>5</option><br>
<option value='5.5'>5.5</option><br>
<option value='6'>6</option><br>
<option value='6.5'>6.5</option><br>
<option value='7'>7</option><br>
<option value='7.5'>7.5</option><br>
<option value='8'>8</option><br>
<option value='8.5'>8.5</option><br>
<option value='9'>9</option><br>
<option value='9.5'>9.5</option><br>
<option value='10'>10</option><br>
</select><label><input type='checkbox' name='item' value='Exercise 1' id='checkbox1' style='display: inline-block;'> $$\int_0^1 x^2\,dx$$</label>
<hr>
</li>
<hr>
<li>
<select id='points'>
<option value='0'>0</option><br>
<option value='0.5'>0.5</option><br>
<option value='1'>1</option><br>
<option value='1.5'>1.5</option><br>
<option value='2'>2</option><br>
<option value='2.5'>2.5</option><br>
<option value='3'>3</option><br>
<option value='3.5'>3.5</option><br>
<option value='4'>4</option><br>
<option value='4.5'>4.5</option><br>
<option value='5'>5</option><br>
<option value='5.5'>5.5</option><br>
<option value='6'>6</option><br>
<option value='6.5'>6.5</option><br>
<option value='7'>7</option><br>
<option value='7.5'>7.5</option><br>
<option value='8'>8</option><br>
<option value='8.5'>8.5</option><br>
<option value='9'>9</option><br>
<option value='9.5'>9.5</option><br>
<option value='10'>10</option><br>
</select><label><input type='checkbox' name='item' value='Exercise 2' id='checkbox1' style='display: inline-block;'> Evaluate $$\int_{-1}^1 e^x\,dx$$</label>
<hr>
</li>
<li>
<select id='points'>
<option value='0'>0</option><br>
<option value='0.5'>0.5</option><br>
<option value='1'>1</option><br>
<option value='1.5'>1.5</option><br>
<option value='2'>2</option><br>
<option value='2.5'>2.5</option><br>
<option value='3'>3</option><br>
<option value='3.5'>3.5</option><br>
<option value='4'>4</option><br>
<option value='4.5'>4.5</option><br>
<option value='5'>5</option><br>
<option value='5.5'>5.5</option><br>
<option value='6'>6</option><br>
<option value='6.5'>6.5</option><br>
<option value='7'>7</option><br>
<option value='7.5'>7.5</option><br>
<option value='8'>8</option><br>
<option value='8.5'>8.5</option><br>
<option value='9'>9</option><br>
<option value='9.5'>9.5</option><br>
<option value='10'>10</option><br>
</select><label><input type='checkbox' name='item' value='Exercise 3' id='checkbox1' style='display: inline-block;'> Evaluate $$\int cos(x)\,dx$$</label>
<hr>
</li>
</ul>
The corrected PHP:
for($i = 0; $i < $n; $i++){
echo "<li><select id='points'>";
for($j = 0; $j <= 10; $j += 0.5){
echo "<option value='$j'>$j</option>";
}
echo"</select><label><input type='checkbox' name='item' value='Exercise " . $i + 1 . "' id = 'checkbox1' style='display: inline-block;'> " . $exercises[$i] . "</label><hr></li>";
}
Related
Need experts opinion on below mentioned code, i am not good with javascript. please help
what i need is,i have 2 drop downs. one is catid1 and 2nd is catid ...
catid loads some values from databases, and catid1 have some manual entries, few of them are same and few are different. but i want is when i will select catid1 value from list like "abc" then catid value should be changed to same as catid1 "abc"
i have tried some different ways but can't resolve this, any one please suggest either this could be possible or not.
<div class="col-md-4">
<div class="form-group">
<label for="catId"><?php echo $categoryField; ?></label>
<select class="form-control" name="catId1" id="catId1" onChange="qt();">
<option> Select Base Query Type </option>
</select>
<span class="help-block"><?php echo $categoryHelp; ?></span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="catId"><?php echo $categoryField; ?></label>
<select class="form-control" name="catId" id="catId">
<?php
$tcat = "SELECT catId, catName FROM categories WHERE userId = ".$userId." AND isActive = 1 ";
$rest = mysqli_query($mysqli, $tcat) or die('-2'.mysqli_error());
?>
<option value="..."><?php echo $selectOption; ?></option>
<?php while ($tcatrow = mysqli_fetch_assoc($rest)) { ?>
<option value="<?php echo $tcatrow['catId']; ?>"><?php echo clean($tcatrow['catName']); ?></option>
<?php } ?>
</select>
<span class="help-block"><?php echo $categoryHelp; ?></span>
</div>
</div>
</div>
sample code which i have tried is as below as well but it's not working in my case.
<select name="dropdown[]">
<option value="1">Sony</option>
<option value="2">Nintendo</option>
<option value="3">Microsoft</option>
</select>
<select name="dropdown[]">
<option value="1">Sony</option>
<option value="2">Nintendo</option>
<option value="3">Microsoft</option>
</select>
<select name="dropdown[]">
<option value="1">Sony</option>
<option value="2">Nintendo</option>
<option value="3">Microsoft</option>
</select>
var selects = document.querySelectorAll('select[name="dropdown[]"]');
selects[0].addEventListener('change', function () {
for (var i = 0; i < selects.length; i++) {
selects[i].value = selects[0].value;
}
});
You forgot your script tags in the second example:
<select name="dropdown[]">
<option value="1">Sony</option>
<option value="2">Nintendo</option>
<option value="3">Microsoft</option>
</select>
<select name="dropdown[]">
<option value="1">Sony</option>
<option value="2">Nintendo</option>
<option value="3">Microsoft</option>
</select>
<select name="dropdown[]">
<option value="1">Sony</option>
<option value="2">Nintendo</option>
<option value="3">Microsoft</option>
</select>
<script language="javascript">
var selects = document.querySelectorAll('select[name="dropdown[]"]');
selects[0].addEventListener('change', function () {
for (var i = 0; i < selects.length; i++) {
selects[i].value = selects[0].value;
}
});
</script>
jsfiddle: https://jsfiddle.net/ge127u8d/
Yes you can do it by javascript or Jquery. Its easier in Jquery like
function qt() {
var catId1Val = $('#catId1 :selected').val();
$("#catId> option").each(function() {
if (this.value == catId1Val)
$("#catId select").val(this.value);
});
}
Check out the following jQuery method:
http://api.jquery.com/val/
http://api.jquery.com/each/
http://jsfiddle.net/Rx3AP/
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Hi guys I am building a for loop which basically generates a dynamic select options form.
Everything works fine until I try and use a decimal value as an incrementer.
for instance a normal loop would be this:
for(i =0; i <= 10; i++){
// do some code
}
The issue I am facing is that everything that is being put in is dynamic including the increment which may need to increment with decimal figures!
For instance it may need this:
for(i =0; i <= 10.5;i+= 1.5){
//do some code
}
Now the thing is that again everything is dynamic so the actual end code looks like this:
for(thei = 0; thei <= calchours; thei += +thetype){
}
Everything works 100% if the "thetype" is just 1, but as soon as its a 1.5 it only loops a few times before exiting.
Here is the Example code of what I am trying to do:
Example Html Code:
<select class="form-control" id="bookingtype" name="bookingtype">
<option value="1" selected="">Hourly Bookings</option>
<option value="1.5">1 Hour Bookings With 30 Minute Intervals</option>
</select>
<select class="form-control" id="timefrom" name="timefrom">
<option value="N/A" selected="">N/A</option>
<option value="24">00:00</option>
<option value="01">01:00</option>
<option value="02">02:00</option>
<option value="03">03:00</option>
<option value="04">04:00</option>
<option value="05">05:00</option>
<option value="06">06:00</option>
<option value="07">07:00</option>
<option value="08">08:00</option>
<option value="09" selected="selected">09:00</option>
<option value="10">10:00</option>
<option value="11">11:00</option>
<option value="12">12:00</option>
<option value="13">13:00</option>
<option value="14">14:00</option>
<option value="15">15:00</option>
<option value="16">16:00</option>
<option value="17">17:00</option>
<option value="18">18:00</option>
<option value="19">19:00</option>
<option value="20">20:00</option>
<option value="21">21:00</option>
<option value="22">22:00</option>
<option value="23">23:00</option>
</select>
<select class="form-control" id="timeto" name="timeto">
<option value="N/A" selected="">N/A</option>
<option value="24">00:00</option>
<option value="00.5">00:30</option>
<option value="01">01:00</option>
<option value="01.5">01:30</option>
<option value="02">02:00</option>
<option value="02.5">02:30</option>
<option value="03">03:00</option>
<option value="03.5">03:30</option>
<option value="04">04:00</option>
<option value="04.5">04:30</option>
<option value="05">05:00</option>
<option value="05.5">05:30</option>
<option value="06">06:00</option>
<option value="06.5">06:30</option>
<option value="07">07:00</option>
<option value="07.5">07:30</option>
<option value="08">08:00</option>
<option value="08.5">08:30</option>
<option value="09">09:00</option>
<option value="09.5">09:30</option>
<option value="10">10:00</option>
<option value="10.5">10:30</option>
<option value="11">11:00</option>
<option value="11.5">11:30</option>
<option value="12">12:00</option>
<option value="12.5">12:30</option>
<option value="13">13:00</option>
<option value="13.5">13:30</option>
<option value="14">14:00</option>
<option value="14.5">14:30</option>
<option value="15">15:00</option>
<option value="15.5">15:30</option>
<option value="16">16:00</option>
<option value="16.5">16:30</option>
<option value="17" selected="selected">17:00</option>
<option value="17.5">17:30</option>
<option value="18">18:00</option>
<option value="18.5">18:30</option>
<option value="19">19:00</option>
<option value="19.5">19:30</option>
<option value="20">20:00</option>
<option value="20.5">20:30</option>
<option value="21">21:00</option>
<option value="21.5">21:30</option>
<option value="22">22:00</option>
<option value="22.5">22:30</option>
<option value="23">23:00</option>
<option value="23.5">23:30</option>
</select>
<input id="dinnerswitch" type="checkbox" value="1">
<div id="dinnerhourdiv" class="form-group">
<label class="col-sm-3 control-label">Select Which Hour You Would Like To Have Off?</label>
<div class="col-sm-2" id="showdinnerhours"></div>
</div>
Example Javascript
jQuery(document).read(function(){
jQuery('#dinnerswitch').change(function(){
if(jQuery(this).is(':checked')) {
jQuery(this).val(1);
};
if(jQuery(this).is(':checked') == false) {
jQuery(this).val(0);
};
var dinnerid = jQuery('#dinnerswitch').val();
var thestart = jQuery('#timefrom').val();
var theend = jQuery('#timeto').val();
var thetype = jQuery('#bookingtype').val();
var thei = 0;
var doi = '';
var calchours = ((theend - thestart) / thetype);
var calstart = '';
var calend = '';
var enterhours = '';
var addingnumbers = 0;
for(thei = 0; thei <= calchours; thei+= +thetype){
calstart = +thestart + +thei;
if(calstart < 12){
calend = calstart + ' AM';
} else {
calend = calstart + ' PM';
}
calend = calend.replace('.5', ':30');
enterhours += '<option value="' + addingnumbers + '">' + calend + '</option>';
addingnumbers = +addingnumbers + 1;
}
if(dinnerid == 1){
jQuery('#showdinnerhours').html('<select class="form-control" name="dinnerhour" id="dinnerhour">' + enterhours + '</select>');
jQuery('#dinnerhourdiv').removeClass('hidden');
} else {
jQuery('#showdinnerhours').html('');
jQuery('#dinnerhourdiv').addClass('hidden');
}
});
});
Your logic does exactly what you told it to do!
When selecting "1 hour bookings with 30 minute intervals", and start as 9:00 and end as 17:00 your variables have the following values:
thestart = 09
theend = 17
thetype = 1.5
therefore
calchours = 5.333333 or ((17-9)/1.5)
Your loop starts at zero, continues until calchoursand increments by 1.5. Therefore the loop only runs 4 times, giving you entries in the dynamic select of 9:00, 10:30, 12 & 13:30.
This is entirely consistent with "maths", and I came to these conclusions through the magic of "debugging". Check the console: http://jsfiddle.net/7x82d66h/
I have 2 selects and what i wanna do is (without refreshing the page): the moment the user selects a value from the first select (value1 or value2) changes the second select: if he choosed value1, then he have a select with values a, b, c, d; if he choosed value2, then he can choose on second select e, f, g, h.
Is this possible without refreshing the page?
Edit: I know you all are not here to write code for others; just wanted to keep it simple instead of posting all my messy code :). So, what i want to do, is to modify the second select id=selectAccessiblePaths with the onchange function applyGroupSelection()
function initDivWithConfig () {
divWithInfo = document.createElement('div');
divWithInfo.class = 'divWithInfoControls';
divWithInfo.style.position = 'absolute';
divWithInfo.style.top = '10px';
divWithInfo.style.width = '100%';
divWithInfo.style.textAlign = 'center';
var groupToDisplay = '<p id="pSelectGroup" style="display: block;">Select the user group: ';
groupToDisplay += '<select id="selectGroup" onchange="applyGroupSelection()">';
groupToDisplay += '<option selected>Nothing selected</option>';
for ( var g in userGroups ) {
groupToDisplay += '<option>' + g + '</option>';
}
groupToDisplay += '</select></p>';
divWithInfo.innerHTML += groupToDisplay;
groupSelected = 'group1';
var accessiblePathsToDisplay = '<p id="pSelectAccessiblePaths" style="display: none;">Select the accessible paths: ';
accessiblePathsToDisplay += '<select id="selectAccessiblePaths" onchange="applyAccessiblePathsSelection()">';
accessiblePathsToDisplay += '<option selected>Nothing selected</option>';
for ( var ap=0; ap<userGroups[ groupSelected ].accessiblePaths.length; ap++ ) {
var pathsForThisGroup = userGroups[ groupSelected ].accessiblePaths[ ap ][ "ns0:svg" ][ "groupPathsName" ];
accessiblePathsToDisplay += '<option>' + pathsForThisGroup + '</option>';
}
accessiblePathsToDisplay += '</select></p>';
divWithInfo.innerHTML += accessiblePathsToDisplay;
document.body.appendChild( divWithInfo );
}
function applyGroupSelection () {
groupSelected = "group2";
hideUnhideObject( "pSelectGroup" );
hideUnhideObject( "pSelectAccessiblePaths" );
}
Easy with HTML, CSS and a JavaScript line:
HTML:
<select id='firstselect' onchange="document.getElementById('secondselect').className=this.value">
<option value='select'>Select a value</option>
<option value='value1'>Value1</option>
<option value='value2'>Value2</option>
</select>
<select id='secondselect'>
<option value='a'>a</option>
<option value='b'>b</option>
<option value='c'>c</option>
<option value='d'>d</option>
<option value='e'>e</option>
<option value='f'>f</option>
<option value='g'>g</option>
<option value='h'>h</option>
</select>
CSS:
#secondselect, #secondselect option {
display: none;
}
#secondselect.value1, #secondselect.value2 {
display: block;
}
.value1 option[value="a"], .value1 option[value="b"], .value1 option[value="c"], .value1 option[value="d"] {
display: block !important;
}
.value2 option[value="e"], .value2 option[value="f"], .value2 option[value="g"], .value2 option[value="h"] {
display: block !important;
}
See in action: http://jsfiddle.net/nukz3ns3/
UPDATED:
Also you can do a function for change to default value when firstselect change:
function setSecondSelect( select ){
var secondselect = document.getElementById('secondselect');
secondselect.className=select.value;
secondselect.selectedIndex = (select.value === 'value1')?0:4;
}
See how it works: http://jsfiddle.net/nukz3ns3/1/
Yes this is possible by using ajax post method.
Yes its possible if you used ajax.
http://api.jquery.com/jquery.ajax/
try this:
<script type="text/javascript">
$(document).ready(function () {
$("#select1").change(function() {
if($(this).data('options') == undefined){
$(this).data('options',$('#select2 option').clone());}
var id = $(this).val();
// alert(id);
var options = $(this).data('options').filter('[value=' + id + ']');
if(options.val() == undefined){
//$('#select2').hide();
$('#select2').prop("disabled",true);
}else{
//$('#select2').show();
$('#select2').prop("disabled",false);
$('#select2').html(options);
}
});
});
</script>
<div class="pageCol1">
<div class="panel">
<div class="templateTitle">Request for Items</div>
<table class="grid" border="0" cellspacing="0" cellpadding="0">
<tr class="gridAlternateRow">
<td><b>Item to be Request</b></td>
<td>
<select name="select1" id="select1">
<option value="1">--Select--</option>
<option value="2">Stationaries</option>
<option value="3">Computer Accessories</option>
<option value="4">Bottle</option>
<option value="5">Chair</option>
<option value="6">Office File</option>
<option value="7">Phone Facility</option>
<option value="8">Other Facilities</option>
</select>
</td></tr>
<tr><td>
<b>Category</b>
</td>
<td>
<select name="select2" id="select2" >
<option value="1">--Select--</option>
<option value="2">Note Books</option>
<option value="2">Books</option>
<option value="2">Pen</option>
<option value="2">Pencil</option>
<option value="2">Eraser</option>
<option value="2">Drawing sheets</option>
<option value="2">Others</option>
<option value="3">Laptop</option>
<option value="3">PC</option>
<option value="3">CPU</option>
<option value="3">Monitor</option>
<option value="3">Mouse</option>
<option value="3">Keyboard</option>
<option value="3">Mouse Pad</option>
<option value="3">Hard Disk</option>
<option value="3">Pendrive</option>
<option value="3">CD/DVD Writer</option>
<option value="3">RAM</option>
<option value="3">Mother Board</option>
<option value="3">SMPS</option>
<option value="3">Network Cables</option>
<option value="3">Connectors</option>
<option value="7">Land Line</option>
<option value="7">BlackBerry </option>
<option value="7">Other</option>
</select>
</td>
</tr>
</table>
</div>
</div>
</div>
your html can be of your required format.
If you are trying to populate the second select from existing options,
Try using filter() on a change handler
$("firstselect").change(function() {
var options = $("secondselect").filter(function() {
//return the options you want to display
});
$("secondselect").html(options);
});
Or if you want to retrieve options from server, use AJAX and form the options
and do an innerHTML as above.
I have the following <select> inside a <form> that is submitted with ajax. The select is submitting with a value of: Undefined. What is wrong?
<select class="form-control" name="site_theme" id="site_theme" value="<?php $result = mysqli_query($con,"SELECT * FROM settings"); while($row = mysqli_fetch_array($result)) { echo $row['site_theme']; }?>">
<?php
$result = mysqli_query($con,"SELECT * FROM themes");
while($row = mysqli_fetch_array($result))
{
echo "<option VALUE='".$row['theme_name']."'>".$row['theme_name']."</option>";
}
?>
</select>
The javascript copied here to ugly to post so I made a jsFiddle here: http://jsfiddle.net/yz5r4/
Also the above code results as:
<select class="form-control" name="site_theme" id="site_theme" value="Amelia">
<option value="Amelia">Amelia</option>
<option value="Cerulean">Cerulean</option>
<option value="Cosmo">Cosmo</option>
<option value="Cyborg">Cyborg</option>
<option value="Flatly">Flatly</option>
<option value="Journal">Journal</option>
<option value="Readable">Readable</option>
<option value="Simplex">Simplex</option>
<option value="Slate">Slate</option>
<option value="Spacelab">Spacelab</option>
<option value="United">United</option>
</select>
you problems was first a return before ajax call.
second wrong selector for select!
Here is a sample that shows you. http://jsfiddle.net/yz5r4/3/
your selector : $('input$("#site_theme")')
but it should be $("#site_theme") or $("select#site_theme")
HTML:
<select class="form-control" name="site_theme" id="site_theme" value="Amelia">
<option value="Amelia">Amelia</option>
<option value="Cerulean">Cerulean</option>
<option value="Cosmo">Cosmo</option>
<option value="Cyborg">Cyborg</option>
<option value="Flatly">Flatly</option>
<option value="Journal">Journal</option>
<option value="Readable">Readable</option>
<option value="Simplex">Simplex</option>
<option value="Slate">Slate</option>
<option value="Spacelab">Spacelab</option>
<option value="United">United</option>
</select>
<input type="button" id="mclick" value="click" />
JS:
// General Form Submit
$(function () {
$('.error').hide();
$("#mclick").click(function () {
// validate and process form here
var theme = $("#site_theme").val();
alert(theme);
});
});
My form layout is similar to below:
<form action='' method="post" id='myform'>
<select name='select1'>
<option value=''>select option</select>
<option value='a'> a </option>
<option value='b'> b </option>
<option value='c'> c </option>
</select>
<select name='select2'>
<option value=''>select option</select>
<option value='e'> e </option>
<option value='f'> f </option>
<option value='g'> g </option>
</select>
<select name='select3'>
<option value=''>select option</select>
<option value='h'> h </option>
<option value='i'> i </option>
<option value='j'> j </option>
</select>
</form>
<script> $('#myform').validate(); </script>
Note: I have included jquery.js and jquery.validate.js files.
Here, 3 select-option are in form. I need to validate at least one select-option only.
function selectValidate() {
var check = false;
$.each($('select'), function(index, data) {
if (data.val() !== ''){
check = true;
}
});
return check;
}
create your own validator method:
$.validator.addMethod("selectNone", function(value, element) {if (element.value == " ") {return false;} else {return true};} ),
and then add in rules:
yourSelectID1: {required:true, selectNone:true},
yourSelectID2: {required:true, selectNone:true},
yourSelectID3: {required:true, selectNone:true},
There is a mistake on your html code. You should change each <option value=''>select option</select> to this <option value=''>select option</option>. So your html will be something like this: (I added the submit button to show the functionality)
jsFiddle Live Demo
HTML
<form action='' method="post" id='myform' >
<select name='select1' >
<option value=''>select option</option>
<option value='a'> a </option>
<option value='b'> b </option>
<option value='c'> c </option>
</select>
<select name='select2' >
<option value=''>select option</option>
<option value='e'> e </option>
<option value='f'> f </option>
<option value='g'> g </option>
</select>
<select name='select3' >
<option value=''>select option</option>
<option value='h'> h </option>
<option value='i'> i </option>
<option value='j'> j </option>
</select>
<input type='submit' value='validate '>
</form>
The main function is validateSelects().
JS
function validateSelects()
{
var m = false;
$.each($('select'),function()
{
if( $(this).val() != ''){ m=true; }
});
return(m);
}
// For the functionality.
$('#myform').on('submit',function()
{
return validateSelects();
});