I am new to AJAX and PHP, and I have this code:
<head>
<script type="text/javascript">
function crimeselect(){
var select = document.getElementById("crime").value;
}
</script>
</head>
<body>
<select name="crime" id="crime" onChange="crimeselect();">
<option value="CVPerson">Crimes VS Person</option>
<option value="CVMO">Crimes VS Moral and Order</option>
</select>
<select id="CVPerson" onchange="">
<option>Homicide</option>
<option>Kidnapping</option>
</select>
<select id="CVMO" onchange="">
<option>Alarm and Scandal</option>
<option>Assault/Resistance to Authority</option>
</select>
</body>
What I want is, when I choose "Crimes VS Person", the select option with an id of "CVPerson" would only be the one to appear and the select option with an id of "CVHO" would not be appeared. Same also if i choose "Crimes VS Moral and Orders".
I don't know how to do it. Any tips please.
<head>
<script type="text/javascript">
function crimeselect(){
document.getElementById(document.getElementById("crime").value).style.visibility = 'visible';
}
</script>
</head>
<body>
<select name="crime" id="crime" onChange="crimeselect();">
<option value="CVPerson">Crimes VS Person</option>
<option value="CVMO">Crimes VS Moral and Order</option>
</select>
<select id="CVPerson" onchange="" style="visibility:hidden;">
<option>Homicide</option>
<option>Kidnapping</option>
</select>
<select id="CVMO" onchange="" style="visibility:hidden;">
<option>Alarm and Scandal</option>
<option>Assault/Resistance to Authority</option>
</select>
</body>
Related
On click the input field, I do not want to display or show all the options or list. I just want to display while inputting some text only.
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<label for="browser">Choose your country:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Australia">
<option value="USA">
<option value="Inda">
<option value="Bhutan">
<option value="Thailand">
<option value="Canada">
<option value="Japan">
<option value="China">
<option value="France">
</datalist>
</body>
</html>
You can add an input event listener that adds the list attribute when the user types in the field. The id of the datalist can be stored in a data attribute.
$('input').on('input', function(){
const input = $(this)
if(input.val().length > 0){
input.attr('list', input.data('list'));
} else {
input.removeAttr('list');
}
})
<!DOCTYPE html>
<html>
<body>
<label for="browser">Choose your country:</label>
<input data-list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Australia">
<option value="USA">
<option value="Inda">
<option value="Bhutan">
<option value="Thailand">
<option value="Canada">
<option value="Japan">
<option value="China">
<option value="France">
</datalist>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</body>
</html>
I have 3 selectbox on my page and onClick of close button I want to clear all the selectbox which are under the class .popup.
Below is my code to clear fields.
clearText: function() {
$('.popupBody input').val('');
$('.popupBody select').val('');
$('.popupForm').find('.errmsgActive').removeClass('errmsgActive');
$('.popupForm').find('.errmsg').html('');
}
For clearing all select boxes inside .popupBody class, I am using below code.
$('.popupBody select').val('');
For clearing selection made in select2 select box you can try following approach:
$('.popupBody select').each(function(){
//iterate over all the select boxes one by one
$(this).select2("val", ""); //clearing the selection made
});
try this, this will work for you.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="popupBody">
<label>Select option one</label>
<select>
<option value="">-- select --</option>
<option>select1 value 1</option>
<option>select1 value 2</option>
<option>select1 value 3</option>
</select>
<br><br><br>
<label>Select option two</label>
<select>
<option value="">-- select --</option>
<option>select2 value 1</option>
<option>select2 value 2</option>
<option>select2 value 3</option>
</select>
<br><br><br>
<label>Select option Three</label>
<select>
<option value="">-- select --</option>
<option>Stackoverflow</option>
<option>is</option>
<option>awesome</option>
</select>
<br><br><br>
<input type="button" name="" value="CLEAR" id="closebutton">
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#closebutton").click(function(){
$("div.popupBody select").val("");
});
});
</script>
</body>
</html>
To reset a dropdown you need to select the default element usually the first one:
$('.popupBody select').find('option:first-child').attr('selected','selected');
to reset the value in select2 use
$('.popupBody select').select2("val", "");
Your code is looks good.. obviously $('.popupBody select').val(''); is clearing value of select dropdown under .popupBody.
BUT
Make sure, all select input must have option value=''.
See below code
$(".popupBody select").select2();
$("#clear").click(function(){
$('.popupBody select').val('-1').change();
})
#import "https://select2.github.io/dist/css/select2.min.css";
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>
<div class="popupBody">
<select>
<option value="-1">Select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select>
<option value="-1">Select</option>
<option value="A1">A1</option>
<option value="B1">B1</option>
<option value="C1">C1</option>
</select>
<select>
<option value="-1">Select</option>
<option value="A2">A2</option>
<option value="B2">B2</option>
<option value="C2">C2</option>
</select>
</div>
<button id="clear">Clear</button>
What is the problem with below code, why it doesn't work for me..!!! I am unable to fetch selected data and display it on text box.
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$("#name").on("change", function() {
$("#Fname").val($(this).find("option:selected").attr("value"));
})
});
</script>
<script type="text/javascript">
</script>
</head>
<body>
<div>
<select id="Fname" name ="name">
<option value="">Choose Your Value</option>
<option value="India">India</option>
<option value="UK">UK</option>
<option value="US">US</option>
<option value="UAE">UAE</option>
<option value="China">China</option>
<option value="Japan">Japan</option>
</select>
<input type="text" id="Fname" value ="" readonly="readonly">
</div>
</body>
</html>
the select and the input, have the sane id "Fname".
You have given the ID for input box and select box same.
Both have id = "Fname"
Moreover when you find using $("#") it should be an id of the DOM in your case its a name.
However i have corrected your code here.
<html>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#Fname").on("change", function() {
$("input").val($(this).val());
}) });
</script>
</head>
<body>
<div>
<select id="Fname" name ="name">
<option value="">Choose Your Value</option>
<option value="India">India</option>
<option value="UK">UK</option>
<option value="US">US</option>
<option value="UAE">UAE</option>
<option value="China">China</option>
<option value="Japan">Japan</option>
</select>
<input type="text" id="Fname" value ="" readonly="readonly">
</div>
</body>
</html>
Change id of Either select or input and apply it in JQUery will solve your issue.
$(document).ready(function() {
$("#Fname").on("change", function() {
$("#SFname").val($(this).find("option:selected").attr("value"));
})
});
Updated Fiddle
Edit:
You can add multiple value to text box like:
$("#SFname").val($("#SFname").val() + " " + $(this).find("option:selected").attr("value"));
})
Fiddle Link
Please Use This Code Inter Net is mandatory or copy jquery.min.js. the problem is u mentioned same name for select tag id and input text id as same.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#name").on("change", function() { $("#Fname").val($(this).find("option:selected").attr("value")); }) });
</script>
</head>
<body>
<div>
<select id="name" name ="name">
<option value="">Choose Your Value</option>
<option value="India">India</option>
<option value="UK">UK</option>
<option value="US">US</option>
<option value="UAE">UAE</option>
<option value="China">China</option>
<option value="Japan">Japan</option>
</select>
<input type="text" id="Fname" value ="" readonly="readonly">
</div>
</body>
</html>
Is there a way I can get the length of list options in a select-dropdown HTML input tag? The list changes dynamically and I need to calculate the total number of options within the drop-down. The total options are generated dynamically, so I need a way to calculate number of option tags within an html select tag. I also need to do this in pure JS because the app I am working with will not allow me to use JQuery. (Please don't argue that with me unless there is absolutely no way to do this in pure JS.)
Needs only to be compatible with Internet Explorer.
I assume this will have to do with accessing the DOM, but I am not sure how exactly the syntax will work out.
Since you didn't specify that you could use jQuery, try this:
HTML:
<select id="test">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
JavaScript:
document.getElementById("test").options.length
example
Select the options from the select input, then count them with length
$("#input1 option").length
i did this Using JQuery
$(document).ready(function() {
$("button").click(function(){
var optionLength = $("#user option").length;
alert("length of options is : "+optionLength);
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Get length of list Options</title>
</head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<body>
<select id="user" multiple="" size="5" class="form-control" id="participants" name="participants" style="height: 98px !important;">
<option value="1">S RAJ</option>
<option value="2"> SHARMA</option>
<option value="3">SINGH</option>
<option value="4"> ROY</option>
<option value="5">VERMA</option>
<select>
<button type="button">Get Users</button>
</body>
</html>
Try this:
In the HTML file:
<select id="mySelect">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
In the JavaScript file:
document.getElementById("mySelect").length;
<select id="lister-sort-by-options" name="sort" class="lister-sort-by">
<option value="0" selected="selected">
Movies
</option>
<option value="1">
TV Shows
</option>
<option value="2">
Morning Shows
</option>
<option value="3">
Moonlight
</option>
<option value="4">
Music
</option>
</select>
I am trying to make a drop down menu that takes me to various webpages. Right now it is set up so you make your selection and then you hit a "Go" button and then it takes you to the appropriate link. I am trying to figure out how to make it so when you make your selection it automatically goes and you don't need to push the "Go" button.
Here is what I have:
<p align="center">
<form name="jump" class="center">
<select name="menu">
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</form>
</p>
Any help or links to explanations would be great. Thank you!
Try the following:
<select onchange="location = this.options[this.selectedIndex].value;">
<option>Please select</option>
<option value="http://www.apple.com/">Apple</option>
<option value="http://www.bbc.com">BBC</option>
<option value="http://www.facebook.com">Facebook</option>
</select>
What you were looking for was 'onchange' instead of 'onsubmit'
Check out jQuery .change()
<script>
$('select.menu').change(function(e){
// this function runs when a user selects an option from a <select> element
window.location.href = $("select.menu option:selected").attr('value');
});
</script>
Something like this might help - basically you just tie an onChange event to the select so that when a new option is selected it'll forward the location to the page.
<p align="center">
<form name="jump" class="center">
<select name="menu" onchange="gotoPage(this)">
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</form>
</p>
<script type="text/javascript">
function gotoPage(select){
window.location = select.value;
}
</script>
I would recommend that you start using the javascript framework jQuery as it really will make your life much easier when it comes to javascript.
When you have jQuery installed and setup in you web page you should be able to do something like this:
<script type="text/javascript">
$(document).ready(function() {
$("#selection").change(function() {
location = $("#selection option:selected").val();
});
});
</script>
<p align="center">
<form name="jump" class="center">
<select name="menu" id="selection>
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
</form>
</p>
Obviously super late to the party here, but since I was trying to figure out the same thing and was able to, I'll post how here.
The other answers have you load the link when you change your select element option, but you originally had asked to do it with a button, after making your selection. This worked for me:
<script type="text/javascript">
$(document).ready(function() {
var newUrl = "";
$("#picksite").change(function() {
$newUrl = $("#picksite option:selected").val();
});
$("#executelink").click(function() {
location = $newUrl ;
});
});
</script>
<select id="picksite">
<option value="">Pick A Website</option>
<option value="http://google.com">Google</option>
<option value="http://facebook.com">Facebook</option>
<option value="http://twitter.com">Twitter</option>
<option value="http://gmail.com">Gmail</option>
</select>
<button id="executelink">Go To Site</button>