Could someone please give me a clue as to why the following code does not work under MSIE?
<html>
<body>
<select id="si">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
<script type="text/javascript">
var e=document.getElementById("si");
e.size=3;
e[0].style.display="none"; // <-------- no effect
</script>
</body>
</html>
IE doesn't allow you to manipulate option elements directly. In my experience, you need to remove all of the option elements from the select and repopulate them with whatever changes you want to make already applied (in this case, one element removed).
For anyone having to deal with hiding option elements in those versions affected, I posted a workaround here which doesn't clone or remove the options but wraps spans around them, which is arguably much easier to deal with:
http://work.arounds.org/issue/96/option-elements-do-not-hide-in-IE/
This seems to work ok under MSIE, with hopefully no "side effects", if you find something wrong please let me know it, thanks.
<html>
<body>
<select id="si">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<script type="text/javascript">
var e=document.getElementById("si");
e.size=3;
var a = new Array();
var n = new Array();
var x = 2;
if(!a.length)for(var i=0,m=e.length;i<m;i++) {
a.push(e[i].value);
}
while(e.firstChild)
e.removeChild(e.firstChild);
for(var i=0,m=a.length;i<m;i++) {
if(x==a[i]) {
e.add(new Option(a[i],a[i]));
}
}
</script>
</body>
</html>
Related
I have a Node.js application consisting of the following file system:
public
elegant-aero.css
stadium-wallpaper.jpg
team-results.html
public.js
app.js
teamresults.mustache
Through an HTML form, I want to populate the options of a dropdown menu based on the user's selected option from another dropdown menu. HTML is below:
<form>
<label for="selectLeague">
<span>National League:</span>
<select id="selectLeague" name="leagueCode">
<option style="display:none;"></option>
<option value="SP1">Spanish La Liga</option>
<option value="E0">English Premier League</option>
<option value="D1">German Bundesliga</option>
<option value="F1">French Ligue 1</option>
<option value="I1">Italian Serie A</option>
<option value="P1">Portuguese Primeira Liga</option>
<option value="N1">Dutch Eredivisie</option>
<option value="SC0">Scottish Premier League</option>
</select>
</label>
<label for="selectTeam">
<span>Team Name:</span>
<select id="selectTeam" name="teamName">
<option>Choose a team:</option>
<!-- populated after user makes a selection on league -->
</select>
</label>
<label>
<span></span> <input type="submit" value="Submit">
</label>
</form>
There are simple ways that this can be accomplished with just JavaScript through client-side rendering. For example:
Dynamically Populating Drop down list from selection of another drop down value
However, I absolutely cannot get this to work with Node.js (sever-side). Following the example in the link above, I created a JavaScript file called public.js and put it in the public directory. The JavaScript file contains the following dummy code:
// Hard code all teams by their leagues, as a test
const teamsByLeague = {
SP1: [
"Real Madrid",
"Barcelona"
],
E0: [
"Chelsea",
"Arsenal"
]
}
function updateTeamSelection(leagueCode) {
if (leagueCode.length == 0) document.getElementById("selectTeam").innerHTML = "<option></option>";
else {
var teamOptions = "";
for (teamIndex in teamsByLeague[leagueCode]) {
teamOptions += "<option>" + teamsByLeague[leagueCode][teamIndex] + "</option>";
}
document.getElementById("selectTeam").innerHTML = teamOptions;
}
}
I updated the HTML file to contain this line on the league selection dropdown menu:
<label for="selectLeague" onChange="updateTeamSelection(this.value);">
And added this in the body of the HTML document:
<script src="public.js"></script>
And lastly, following an advice I saw in the following StackOverflow page:
nodejs/express include local js file
I added the following line to app.js:
app.get('/public.js',function(req,res){
res.sendFile('public.js');
});
Nevertheless, after all of this, when changing the selection on the league dropdown menu, I still get the error message:
Uncaught ReferenceError: updateTeamSelection is not defined
onchange
Not exactly sure what am I missing. Any help is massively appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select id="selectid">
<option>name</option>
</select>
<select id="secondselectid"></select>
<script>
var selectid = document.getElementById('selectid')
var secondselectid = document.getElementById('secondselectid')
var fetcheddata = false
function adddatatosecondone (data) {
secondselectid.innerHTML = "";
data.forEach(i => {
var option = document.createElement('option')
var text = document.createTextNode(i)
option.appendChild(text)
secondselectid.appendChild(option)
});
}
selectid.addEventListener(onchange, () => {
fetch("path to your online server", {method: 'GET'})
.then(data => {
return data.json()
}).then(data => {
fetcheddata = data
adddatatosecondone(data)
})//method is of your choice if your server receives post or get whatever
})
</script>
</body>
</html>
and you have to make a server with nodejs and on request by the above html you have to send a json response if you are using expressn you can send this with res.json();
I am using wordpress and on some of my pages I'd like to get some nice bootstrap forms up and running but the style messes up. If I paste my code and try it locally it all works fine. I think the stylesheets are colliding or something? How can I fix it?
Here's my code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="http://192.3.88.113/bootstrap-select.css">
<style>
body {
padding-top: 70px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://192.3.88.113/bootstrap-select.js"></script>
<form class="form-inline">
<div class="form-group">
<label class="col-md-1 control-label" for="lunchBegins">Lunch (Begins search):</label>
</div>
<div class="form-group">
<select id="lunchBegins" class="selectpicker" data-live-search="true" data-live-search-style="begins" title="Please select a lunch ...">
<option>Hot Dog, Fries and a Soda</option>
<option>Burger, Shake and a Smile</option>
<option>Sugar, Spice and all things nice</option>
<option>Baby Back Ribs</option>
<option>A really really long option made to illustrate an issue with the live search in an inline form</option>
</select>
</div>
</form>
</div>
<script>
$(document).ready(function () {
var mySelect = $('#first-disabled2');
$('#special').on('click', function () {
mySelect.find('option:selected').prop('disabled', true);
mySelect.selectpicker('refresh');
});
$('#special2').on('click', function () {
mySelect.find('option:disabled').prop('disabled', false);
mySelect.selectpicker('refresh');
});
$('#basic2').selectpicker({
liveSearch: true,
maxOptions: 1
});
});
</script>
How it SHOULD look:
How it ends up looking on my wordpress page:
Please try this and let me know if this working. Regards.
HTML
<select data-live-search="true" title="Please select a lunch" class="selectpicker show-menu-arrow test">
<option>Hot Dog, Fries and a Soda</option>
<option>Burger, Shake and a Smile</option>
<option>Sugar, Spice and all things nice</option>
<option>Baby Back Ribs</option>
<option>A really really long option made to illustrate an issue with the live search in an inline form</option>
</select>
JS
$('.selectpicker').selectpicker();
DEMO
I will update my answer if it not working.
How would I set filter_branch=true and filter_branch_val=sony via $_GET when an option is selected?
<select name="filter_brand">
<option>Sony</option>
<option>LG</option>
</select>
So I have something like http://mypage.com/index.php?filter_branch=true&filter_branch_val=sony to be used for sql query filter.
If java script function will work for you . please try this code
HTML
<select name="filter_brand" onchange="sendFilter(this.value)">
<option>Sony</option>
<option>Lg</option>
<option>Samsung</option>
</select>
Javscript
<script type="text/javascript">
function sendFilter(vaa)
{
console.log(vaa);
window.location.href = 'product.php?
filter_branch_val='+vaa+'&filter_branch=true';
}
</script>
You can use jQuery for this. I have tested it and it is working.
Add this:
<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> </head>
HTML
<select id="myselect" name="filter_brand" onchange="javascript:goToURL()">
<option>No selection *</option>
<option>Sony</option>
<option>LG</option>
</select>
SCRIPT
<script>
function goToURL(url){
var option = $( "#myselect option:selected" ).text();
var yoururl = "http://www.example.com/";
var url = yoururl+ "?page="+ option;
window.location.replace(url);
}
</script>
Try this and come back to me.
I used This and This as reference.
In the below jquery mobile html code, onchange function (onchangeInDropDown();) is called whenever there is a change in multi-select option in drop down. I'm doing some time consuming operation (updating the UI, based on item selected) whenever there is a change. I'm seeing some strange behaviour if I select more than one options quickly (one after another). Could you please suggest me a better way to handle this.
Thought of implementing the following solution, but do not know how to implement it.
Removing the onchange function and put the OK button in the overlay menu. On selecting the OK button, will call a function to get all the item selected and update the UI with respect to the item selected, ie., update all together instead of every change. The problem here is I do not know how to put OK button in the overlay menu. Is there a way to put ok button in overlay menu
Please help me!!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> Multiselect item </title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<!-- below three tags , link and script are for showing pop up toast dialogs -->
<link href="css/toastr.css" rel="stylesheet"/>
<script type="text/javascript" src="javascripts/toastr.js"></script>
<link href="css/toastr-responsive.css" rel="stylesheet"/>
<script type="text/javascript" src="javascripts/jquery.jsPlumb-1.4.1-all-min.js"></script>
<script type="text/javascript">
function onchangeInDropDown (){
//Performing some time consuming operation and updating the ui based on item selected
}
function getDropDownValue() {
var inputElems = document.getElementById("item_drop_select");
count = 0;
for (var i=1; i<inputElems.length; i++) {
if (inputElems[i].selected == true) {
count++;
alert (inputElems[i].value);
// Update the UI based on item inputElems[i].value
}
}
}
</script>
</head>
<body>
<form name="myform">
<div id="item_drop" class="ui-screen-hidden" style="display: block" >
<select data-mini="true" id="item_drop_select" name="item_drop_select" size="1" multiple="multiple" data-native-menu="false" onchange="onchangeInDropDown();">
<option >Multi-select list of item to buy</option>
<option value="milk" id="milk" >Milk</option>
<option value="oil" id="oil" >Oil</option>
<option value="rice" id="rice" >Rice</option>
<option value="softdrinks" id="softdrinks" >Softdrinks</option>
<option value="detergent" id="detergent" >Detergent</option>
</select>
<div data-role="button" id= "goButton" style= "visibility:block" onclick="getDropDownValue();">Get the drop down values </div>
</div>
</form>
</body>
</html>
Can you please replace this data-native-menu="true". It will open Select menu as native control.
I am currently making a web page in html with a series of drop down menus. The web site is here: http://tc.met.psu.edu/tcgengifs/index2.html
I am using the following code to make the drop-down menus
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function getUrl() {
var part12 = document.getElementById("firstChoice2").value;
var part22 = document.getElementById("secondChoice2").value;
var part32 = document.getElementById("thirdChoice2").value;
return "http://tc.met.psu.edu/tcgengifs/CMC/"+part12+"/"+part22+part32;
}
function gotoSelection() {
var urlToGoTo = getUrl();
alert(urlToGoTo);
//location.href=urlToGoTo;
function setupLink() {
var urlToGoTo = getUrl();
document.getElementById("gotoLink").href=UrlToGoTo;
}
</script>
</head>
<body onload="setupLink();">
<div id=leftcol>
<select id =firstChoice2 onchange="setupLink();">
<option value=2012072600>2012072600</option>
<option value=2012072512>2012072512</option>
</select>
</div>
<body>
<div id=leftcencol>
<select id =secondChoice2 onchange="setupLink();">
<option value=rain>Rainfall</option>
<option value=slp>Sea Level Pressure</option>
<option value=850virt>850mb Virtual Temperature</option>
</select>
</div>
<div id=rightcencol>
<select id =thirdChoice2 onchange="setupLink();">
<option value=.anim.html>Animation</option>
<option value=0.png>000hr</option>
<option value=1.png>006hr</option>
<option value=2.png>012hr</option>
</select>
</div>
<div id=rightcol>
<a id="gotoLink" href="">Submit</a>
My problem is that I need to use this code (with modifications) multiple times, but when I do that, the submit button for each series of 3 dropdown menus takes me to the site that the last piece of code is designed to take me to. How do I separate the code so that the first series of three dropdowns is not influenced by any other series?
Your second function gotoSelection() is missing a closing brace but that is not what is causing your problems.
The way you are passing the URL back into the anchor isn't correct try;
document.getElementById("gotoLink").setAttribute("href",urlToGoTo);
In your setupLink() function to replace the line;
document.getElementById("gotoLink").href=UrlToGoTo;