<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1 id="hey">List King</h1>
<div class="Select-DB">
<select id="DB" class="chosen-select" title="Select Database" data-placeholder="Select database you want!" style="width: 300px;">
<option value=""></option>
<option value="Pubchem3D"> Pubchem3D</option>
<option value="molport"> Molport</option>
<option value="ChemAxon"> ChemAxon</option>
<option value="ChemSpider"> ChemSpider</option>
</select>
</div>
<script src="jquery-1.12.4.js" type="text/javascript"></script>
<script src="chosen_v1.6.2/chosen.jquery.js" type="text/javascript"></script>
<script src="ff.js" type="text/javascript"></script>
</body>
</html>
jquery chosen not working, what's wrong in my code?
My select tag just appear as default form....
p.s. Jquery code is located in another file ("ff.js")
$(document).ready(function(){
$(".chosen-select").chosen({no_results_text: "Sorry, We don't have such database ;-)"});
});
You need to change your javascript file like this
$('.chosen-select').change(function(){
var aaa = $("#DB").val(); // get option value
if(aaa === '') {
// user select empty item
console.log("Sorry, We don't have such database ;-)");
}
else{
// user select valid item
console.log(aaa);
}
});
How about using on change event?
$('.chosen-select').change(function(){
console.log(this.val());
});
I don't quite understand your question but try this
LINK
HTML
<h1 id="hey">List King</h1>
<div class="Select-DB">
<select id="DB" class="chosen-select" title="Select Database" data-placeholder="Select database you want!" style="width: 300px;">
<option value=""></option>
<option value="Pubchem3D"> Pubchem3D</option>
<option value="molport"> Molport</option>
<option value="ChemAxon"> ChemAxon</option>
<option value="ChemSpider"> ChemSpider</option>
</select>
</div>
JS
$('.chosen-select').change(function(){
var aaa = $("#DB").val();
if(aaa != ""){
console.log(aaa);
}
else{
console.log("Sorry, We don't have such database ;-)");
}
});
Related
I'm not good at javascript but I tried this...
I'm trying to make an option for a user to switch to another page after searching for an item.
The user for example will searches for a Mercedes under cars section then the options value can change to the Mercedes links page as well as can change to GMC links page is the user searches for gmc. This code seems not to work.
Below is the code:
<div class="all" id="note">
Some content will be posted here...
</div>
<select id="marketing" onChange="window.open(this.value)" multiple>
<option value="1">cars</option>
<option value="2">houses</option>
<option value="3">Promotion</option>
</select>
<script type="text/javascript">
var cars = ['mercedes']
$('#marketing').change(function(){
if($(this).val() == '1'){
if cars[0] ==='mercedes';{
$(this).val() == "http://www.cars.com/mercedes";
}
}
});
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script>
var cars = ['mercedes']
function myFunction() {
var x = document.getElementById("marketing").value;
var companey = document.getElementById('companies').value;
console.log(x + companey);
if (x == 1 && companey == "mercedes") {
var url =
window.open("http://www.cars.com/mercedes" , '_blank');//for new tab
//for same tab
//window.open('http://www.cars.com/mercedes');
}
}
</script>
</head>
<body>
<!this is a working sample hope this will help>
<div class="all" id="note">
Some content will be posted here... <br />
<input type="text" id="companies">mercedes</input>
</div>
<select id="marketing" onchange="myFunction()">
<option value="0"></option>
<option value="1">cars</option>
<option value="2">houses</option>
<option value="3">Promotion</option>
</select>
</body>
</html>
I'm trying to load page content into a div via Ajax when a select option is selected.
This is my code, but it will not work.
$('mySelect').on('change',function(){
function loadPage(url){
$("#page").load(url);
}
});
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<select class="custom-select" id="mySelect">
<option value="1" onchange="loadPage('One.html')">One</option>
<option value="2" onchange="loadPage('Two.html')">Two</option>
</select>
</div>
<div id="page"></div>
</body>
</html>
I have a select box with 2 options the values are One.html and Two.html and under that I have a div and want the content from One.html and Two.html to load in the div when the select box changes... Via Ajax any suggestions?
Thanks
You're missing the id sign # :
$('mySelect').on('change',function(){
Should be :
$('#mySelect').on('change',function(){
___^
Try to avoid the inline event onchange() and use data-* to store the url param then pass it to the loadPage function inside the change event.
$(function() {
loadPage("One.html");
$('#mySelect').on('change', function() {
loadPage($(this).find(':selected').data('url'));
//OR
// $("#page").load( $(this).find(':selected').data('url') );
});
});
function loadPage(url) {
$("#page").load(url);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<select class="custom-select" id="mySelect">
<option value="1" data-url="One.html">One</option>
<option value="2" data-url="Two.html">Two</option>
</select>
</div>
<div id="page"></div>
it's quite simple:
$("#SelectOne").change(function() {
$("#someDiv").load($(this).val());
});
<select id="SelectOne">
<option>One.html</option>
<option>Two.html</option>
</select>
<div id="someDiv"></div>
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>
I have written the below code. But it does not show me the alert message when I don't select the other value and click onto the submit button.
I don't want to use getElementbyId. I am using the name attribute of the HTML.
<HTML>
<HEAD>
<TITLE>ComboBox Validation</TITLE>
<script Language="JavaScript">
function validate()
{
if (document.comboForm.technology.value=="0") \
{
alert("Please Select Technology");
}
}
</script>
</HEAD>
<BODY>
<form name="comboForm">
<select name="technology">
<option value="0">Select</option>
<option value="1">Java Server Pages</option>
</select>
<input type="submit" value="submit" onClick="validate();">
</form>
</BODY>
</HTML>
I think you want:
if (document.forms["comboForm"].technology.value == "0")
But really, stop avoiding document.getElementById. That's the clearest, easiest way to deal with this:
<select id="ddTechnology" name="technology">
<option value="0">Select</option>
<option value="1">Java Server Pages</option>
</select>
if (document.getElementById("ddTechnology").value == "0")
I need to make javascript code to swap images with option change.
Here is the code:
<select name="Color:"onchange="document.getElementById('myimage').src = this.value;
">
<option value="images/taylormade_purelite_standbag_bk.jpg">Black/White</option>
<option value="images/taylormade_purelite_standbag_by.jpg">Black/Yellow</option>
<option value="images/taylormade_purelite_standbag_byr.jpg">Black/Yelow/Red</option>
<option value="images/taylormade_purelite_standbag_by.jpg">Black/Yellow</option>
<option value="images/taylormade_purelite_standbag_nr.jpg">Navy/Red</option>
<option value="images/taylormade_purelite_standbag_nw.jpg">Red/Black/White</option>
<option value="images/taylormade_purelite_standbag_rb.jpg">Black/Red</option>
<option value="images/taylormade_purelite_standbag_wrb.jpg">White/Red/Black</option>
</select>
<img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage">
My problem is this: I need to have option values in plain text such as "Black/Yelow/Red" not a URL because this option value will show up in the check out page. Can anybody help me?
Setting up a mapping from your color options to the URLs might work, I think.
<script>
var colorUrlMap = {
"Black/White" : "images/taylormade_purelite_standbag_bk.jpg",
//Add more here
"White/Red/Black" : "images/taylormade_purelite_standbag_wrb.jpg"
};
</script>
<select name="Color:"onchange="document.getElementById('myimage').src = colorUrlMap[this.value];">
<option value="Black/White">Black/White</option>
<!-- Add more here -->
<option value="White/Red/Black">White/Red/Black</option>
</select>
<img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage">
Use another attribute on the option:
<option value="Black/White" rel="images/taylormade_purelite_standbag_bk.jpg">Black/White</option>
Then get that attribute with getAttribute("rel")
<select name="Color:" onchange="document.getElementById('myimage').src = this.options[this.selectedIndex].getAttribute('rel');">
You could use CSS and just change the class based upon the selection. Then all of your URL's are in a stylesheet.
CSS:
.red
{
background: url(red.gif) no-repeat;
}
HTML/JS:
<select name="Color:" onchange="document.getElementById('myimageholder').setAttribute("class", "red");">
This works for me.
<HTML>
<head>
<TITLE>Image Select Test</TITLE>
<script type="text/javascript" language='javascript'>
function flip() {
myimage.src = ColorSelect.children[ColorSelect.selectedIndex].getAttribute('url');
}
</script>
</head>
<body>
<form>
Select an image:<br/>
<select id="ColorSelect" onchange="javascript:flip();">
<option url="images/0.png" value='Zero'>Zero</option>
<option url="images/1.png" value='One'>One</option>
<option url="images/2.png" value='Two'>Two</option>
<option url="images/3.png" value='Three'>Three</option>
<option url="images/4.png" value='Four'>Four</option>
</select>
</form>
<img src="images/unknown.png" id="myimage"/>
</body>
<script type="text/javascript" language='javascript'>
// place this after <body> to run it after body has loaded.
var myimage = document.getElementById('myimage');
var ColorSelect= document.getElementById('ColorSelect');
</script>
</HTML>
ColorSelect.children[ColorSelect.selectedIndex].getAttribute('url'); does not work.
It is rather ColorSelect.options[ColorSelect.selectedIndex].getAttribute('url');