I have this dropdown list
#Html.DropDownList("orderPosted", orderList, new { data_native_menu = "false", data_options_prefix = "Insert at Position: ", data_mini = "true" })
and the script to update #itemPosition to pass it to the controller
#Html.Hidden("itemPosition")
<script>$("#itemPosition").val($("#orderPosted option:selected").text());
$(function () {
$("#orderPosted").on("change", function () {
$("#itemPosition").val($("option:selected", this).text());
});
})
</script>
It will assign the text to #itemPosition when the page loads, but the 'On Change' function is not working. What is wrong with the way I have this formatted.
Here is a working example, you can find out what you are doing wrong by comparing it with your code:
function getSelected(el) {
var value = el.val();
var text = el.find("option").filter(":selected").text();
$("#page-one pre").text("Selected: "+value+" - "+text);
}
$(document).on("pagecreate", "#page-one", function() {
getSelected($("#select-custom-1"));
$("#select-custom-1").change(function() {
getSelected($(this));
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page-one">
<div data-role="content" role="main">
<select name="select-custom-1" id="select-custom-1" data-native-menu="false">
<option value="1">The 1st Option</option>
<option selected value="2">The 2nd Option</option>
<option value="3">The 3rd Option</option>
<option value="4">The 4th Option</option>
</select>
<pre></pre>
</div>
</div>
</body>
</html>
BTW, yes you are right, the selected attribute won't be updated, but by using the filter as above, you will get (and can post back) the selected option(s) text as expected.
Related
I am trying to create a simple weather app that asks for the country and then city which then shows the weather for the chosen city.
I've fallen at the first hurdle in that I can't get the cities to load. I'm trying to load the list of cities from a html file that contains a list of cities (I have four different html files which contain the cities in England/Scotland/Wales/Northern Ireland). I can select the country but the cities list doesn't load. Any suggestions would be greatly appreciated.
This is the javascript (the only bit relevant to my current hurdle is the first 3 lines:
$(document).ready(function() {
$('#countries').change(function() {
$('#cities').load($(this).val() + '.html');
});
$('#cities').change(function() {
var cityWeather = $(this).val();
var city = $('#cities option:selected').text();
var apiUrl = 'https://api.openweathermap.org/data/2.5/forecast?id=524901&APPID=798c9a98f7fc15df80c7e21268f57941'
cities = '' + cityWeather
$.ajax({
url: apiUrl,
type: 'GET'
dataType: 'json'
success: function(response) {
console.log(JSON.stringify(response));
}
error: function() {
}
});
});
});
This is the HTML for reference:
<!DOCTYPE html>
<html>
<head>
<title>Weather App</title>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="apiweather.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<h1>Weather App</h1>
</header>
<section>
<select id = "countries">
<option selected>Select a Country</option>
<option value="england-cities">England</option>
<option value="scotland-cities">Scotland</option>
<option value="wales-cities">Wales</option>
<option value="nireland-cities">Northern Ireland</option>
</select>
<select id = "cities">
<option selected><< Please Select</option>
</select>
<div id = "info"><div>
</section>
<footer>
</footer>
</body>
</html>
and finally this is an example of a html list I'm dealing with:
<option>Select a City</option>
<option>Aberdeen</option>
<option>Dundee</option>
<option>Edinburgh</option>
<option>Glasgow</option>
<option>Inverness</option>
Any suggestions or resources are greatly appreciated!
I have multiple tags in an HTML file and I'm having problems knowing the value of each one at the same time.
function knowAllValues(){
var color_element = document.getElementById("color");
var size_element = document.getElementById("size");
var color_text = color_element.options[color_element.selectedIndex].text;
var size_text = size_element.options[size_element.selectedIndex].text;
window.alert(color_text + " - " + size_text);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Example</title>
<link rel="stylesheet" href="">
</head>
<body>
<select id="color">
<option value="1">Op1</option>
<option value="2">Op2</option>
<option value="3">Op3</option>
</select>
<select id="size">
<option value="1">S</option>
<option value="2">M</option>
<option value="3">L</option>
<option value="4">XL</option>
</select>
<button type="button" onclick="knowAllValues()">Click</button>
</body>
</html>
I'm really not quite sure what you're looking for, but it seems like you might want to investigate how to use a for loop in Javascript. This will let you iterate through all of your options.
Additionally, you should check out jQuery. You can iterate through all of your option values by doing something like this:
$('#color option').each(function(){
alert($(this).text());
});
jsfiddle
Either way, you need to iterate through your options, whether with javascript or jquery. Each time you iterate through, you can store it to a variable and use it to display all of them at once. Hope this helps.
I want to use a form selector as shown, and depending on the option selected, a different output. Simple, yet I am not getting it to work. Here is what I have.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
if ("#1") {
$("#display").html("<table width="221"><tbody><tr class="su-even"><td width="64"><strong>Level</strong></td><td width="64"><strong>Damage</strong></td><td width="93"><strong>Crown Tower Damage</strong></td></tr><tr><td width="64">1</td><td width="64">80</td><td width="93">32</td></tr></tbody></table>");
}
if ("#2") {
$("#display").html("<table width="221"><tbody><tr class="su-even"><td width="64"><strong>Level</strong></td><td width="64"><strong>Damage</strong></td><td width="93"><strong>Crown Tower Damage</strong></td></tr><tr><td width="64">2</td><td width="64">88</td><td width="93">36</td></tr></tbody></table>");
}
});
</script>
</head>
<body>
<div>
<form id="option">
<label for="level">Level at a glance:</label>
<select name="level" id="level">
<option id="1">1</option>
<option id="2">2</option>
</select>
</form>
<div id="display">
</div>
</div>
</body>
</html>
There were a couple issues here.
First of all, "#1" and "#2" are always going to == true, since they are strings.
Second, the code that changes the text only happens once, on page load. There is nothing telling it to update after the menu is changed.
Third, on the lines starting with $("#display").html...., you had what should have been a very long string, but you broke it up by using double quotes every time. You need to switch between single and double quotes. If I say, "class="potato">", it sees "class=" as one string, and ">" as another, but it doesn't know what to do with potato. You need to use single quotes, like "class='potato'>" or 'class="potato">'.
This is the fixed code:
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
function changeText(){
if ($("#level option:selected").text() == "1") {
$("#display").html("<table width='221'><tbody><tr class='su-even'><td width='64'><strong>Level</strong></td><td width='64'><strong>Damage</strong></td><td width='93'><strong>Crown Tower Damage</strong></td></tr><tr><td width='64'>1</td><td width='64'>80</td><td width='93'>32</td></tr></tbody></table>");
}
if ($("#level option:selected").text() == "2") {
$("#display").html("<table width='221'><tbody><tr class='su-even'><td width='64'><strong>Level</strong></td><td width='64'><strong>Damage</strong></td><td width='93'><strong>Crown Tower Damage</strong></td></tr><tr><td width='64'>2</td><td width='64'>88</td><td width='93'>36</td></tr></tbody></table>");
}
}
$(document).ready(function(){
changeText();
});
</script>
</head>
<body>
<div>
<form id="option">
<label for="level">Level at a glance:</label>
<select name="level" id="level" onchange="changeText()">
<option id="1" >1</option>
<option id="2">2</option>
</select>
</form>
<div id="display">
</div>
</div>
</body>
Your javascript conditions are executed once, when the document is ready.
You have to add an event, when the select value change !
Add some values in your option elements ( <option value="1">1</option> )
$(document).ready(function(){
// Set event
$("#level").change(function(){
if ($(this).val() === "1") {
$("#display").html(...);
} else {
$("#display").html(...);
}
}
// Call event when document loaded
$("#level").change();
});
i was using a javascript like this...
<select onchange="document.langForm.submit();" ... >
but that broke when i started using jquerymobile.
i know this issue has come up 100 times before. but hyperlinks to prior cases wont help here because i have already read dozens and unfortunately i am just not smart enough to understand any of those other discussions. seriously. i am totally confused.
on the other hand, i have made time to make a REALLY, REALLY simple example to show the headache i have. so, if someone can tell me exactly how to fix these two pages, that would be very much appreciated.
http://activemetrics.ch/test/en.html
http://activemetrics.ch/test/de.html
notice that you can load either one of these in your browser and then switch to the other page by changing the selection in the select list. however, after you get to the second page, you can not use a similar action to get back to the first page.
yes, this has to with ajax. i know that much. but what is the very best way for me to fix the problem right here on these 2 pages to allow users to switch back and forth between the two pages easily?
all suggestions are welcome.
thanks very much to anyone who is spending some of their brain waves considering this for me!
-jd
Description :
To understand this situation you need to understand how jQuery Mobile works. It uses ajax to load other pages.
First page is loaded normally. Its HEAD and BODY is loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODY content is loaded into the DOM.
From what I have so in your answer you understand this but you had make a mistake. There are 2 html files: en.html and de.html but their names are not slightly important. What is important is page id's or id's attribute of data-role="page" div. In your case you have 2 pages with a same div and with a same select id. Because both of them are loaded into the DOM event binding will always go to the first loaded page.
What you need to to is use unique id for your pages and your select boxes.
Working example :
en.html
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head>
<body>
<div data-role="page" id="sbePage1">
<h3>this is english</h3>
<form name="langForm" id="langForm" action="BookNow.asp?" method="get" style="margin-top:0px auto">
<select data-inline="true" name="lang" id="langId" data-native-menu="false" >
<option value="1972" SELECTED>Something Already Selected</option>
<option value="1973">Some Sort of Change</option>
</select>
</form>
<script>
$(document).on('pageinit', '#sbePage1' ,function () {
$(document).off('change', '#langId').on('change', '#langId',function (event) {
$.mobile.changePage('de.html', {
type: 'get',
data: ''
});
});
});
</script>
</div><!-- /page -->
</body>
</html>
de.html
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head>
<body>
<div data-role="page" id="sbePage2">
<h3>this is german</h3>
<form name="langForm2" id="langForm2" action="BookNow.asp?" method="get" style="margin-top:0px auto">
<select data-inline="true" name="lang" id="langId2" data-native-menu="false" >
<option value="1972" SELECTED>Something Already Selected</option>
<option value="1973">Something Else</option>
</select>
</form>
<script>
$(document).on('pageinit', '#sbePage2' ,function () {
$(document).off('change', '#langId2').on('change', '#langId2',function (event) {
$.mobile.changePage('en.html', {
type: 'get',
data: ''
});
});
});
</script>
</div><!-- /page -->
</body>
</html>
Edit :
While I understand your wish, I still must tell you that it is impossible. You can't have 2 pages with a same id with jQuery Mobile in your current example. Think about it, you will have 2 pages with an identical id loaded into the DOM. Each time you try to access the page DIV you will ALWAYS access the first page because it is first in line.
If you want to create a multilingual page you don't need several html pages. Just look for a good jQuery multilingual plugin.
On the other hand you can do what you want if you turn ajax off but you will loose animated transitions.
Example without ajax but where pages have same id
en.html:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script language="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head>
<body>
<div data-role="page" id="sbePage1en">
<h3>this is english</h3>
<form name="langFormEn" id="langFormEn" action="BookNow.asp?" method=get style="margin-top:0px auto">
<select data-inline="true" name="lang" id="langId" data-native-menu="false" >
<option value="1972" SELECTED>Something Already Selected</option>
<option value="1973">Some Sort of Change</option>
</select></form>
<script>
$("#sbePage1en").live('pageshow', function () {
$('#langFormEn').bind('change', function (event) {
$.mobile.changePage('de.html', {
type: 'get',
data: ''
});
});
});
</script>
</div><!-- /page -->
</body>
</html>
de.html
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script language="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head>
<body>
<div data-role="page" id="sbePage1de">
<h3>this is german</h3>
<form name="langFormDe" id="langFormDe" action="BookNow.asp?" method=get style="margin-top:0px auto">
<select data-inline="true" name="lang" id="langId" data-native-menu="false" >
<option value="1972" SELECTED>Something Already Selected</option>
<option value="1973">Something Else</option>
</select></form>
<script>
$("#sbePage1de").live('pageshow', function () {
$('#langFormDe').bind('change', function (event) {
$.mobile.changePage('en.html', {
type: 'get',
data: ''
});
});
});
</script>
</div><!-- /page -->
</body>
</html>
I have two selects
<select name="firstselect" id="firstselect">
<option value="optionOne">optionOne</option>
<option value="optionTwo">optionTwo</option>
</select>
<select name="secondselect" id="secondselect">
<option value="secondOptionOne">secondOptionOne</option>
<option value="secondOptionTwo">secondOptionTwo</option>
<option value="secondOptionThree">secondOptionThree</option>
<option value="secondOptionFour">secondOptionFour</option>
<option value="secondOptionFive">secondOptionFive</option>
</select>
I want the options in the secondselect to change based on the option the user chooses in the first select. How can I do this either in Javascript or PHP?
I have had the same problem as you. The following javascript, written inside the space corresponding to the <head> tag, could be useful if both lists have the same elements and the first element of the list "firstselect" is related to the first one of the list "secondselect", the second element of the list "firstselect" is related to the second one of the list "secondselect" and so on.
<script language="javascript" type="text/javascript">
// <!CDATA[
function Select1_onclick() {
var SelectList1 = document.getElementById('firstselect');
var SelectList2 = document.getElementById('secondselect');
SelectL2.selectedIndex = LSelectL1.selectedIndex;
// ]]>
</script>
You also should modify the <select> tag for the list "firstselect" to include the above script in this way:
<select name="firstselect" id="firstselect" onclick="Select1_onclick()">
If you pretend to make a different options choice, you could use a switch-case structure (see a example here).
I found a nice solution to this here:
http://www.webdeveloper.com/forum/showthread.php?91848-How-do-I-make-one-lt-select-gt-list-dependent-on-the-selection-made-in-another
It's not my code but I hope it helps.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>select change 2nd select</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var varieties=[
["varieties","granny smith","golden delicious","jonathan"],
["varieties","anjou","bartlett","conference"],
["varieties","valencia","pineapple","pera"]
];
function Box2(idx) {
var f=document.myform;
f.box2.options.length=null;
for(var i=0; i<varieties[idx].length; i++) {
f.box2.options[i]=new Option(varieties[idx][i], i);
}
}
</script>
</head>
<body onload="Box2(0);">
<form name="myform" method="post" action="http://www.mysite.com/mysite">
<fieldset>
<select name="box1" onchange="Box2(this.selectedIndex)">
<option value="a">apple</option>
<option value="b">pear</option>
<option value="c">orange</option>
</select>
<select name="box2">
</select>
</fieldset>
</form>
</body>
</html>