I have a simple dropdown and user selects a choice and the page refreshes with the selection added to the URL as a querystring. But i want to also keep the selected state of dropdown after the refresh. How do i do that using jquery or cookie?
<select id="MyDropDown" onchange="window.open(this.options[this.selectedIndex].value,'_top')">
<option value="http://mysite.com/default1.aspx?alpha=A">A</option>
<option value="http://mysite.com/default1.aspx?alpha=B">B</option>
<option value="http://mysite.com/default1.aspx?alpha=C">C</option>
</select>
You can use the jquery cookie plugin and write code as shown below
$('#MyDropDown').change(function() {
$.cookie('mycookie', $(this).val(), {
expires: 365}
);
}
A better way to save the state without putting data on each html request is to use HTML5 Local storage.
Here is a good example how to use it: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-learning-about-html5-local-storage/
Does setting a cookie not work?
<select id="MyDropDown" onchange="document.cookie=this.selectedIndex; window.open(this.options[this.selectedIndex].value,'_top')">
You could also just extract the value of "alpha" passed with the URL.
Related
I need to display two select lists with the same options (there are many).
I have the index.html:
<body>
<select class="c_select1"></select>
<select class="c_select2"></select>
</body>
and in another html file (options.html) all the options (only the options):
<option value='AED' title='United Arab Emirates Dirham'>AED</option>
<option value='AFN' title='Afghan Afghani'>AFN</option>
<option value='ALL' title='Albanian Lek'>ALL</option>
<option value='AMD' title='Armenian Dram'>AMD</option>
<option value='ANG' title='Netherlands Antillean Guilder'>ANG</option>
...
<option value='AOA' title='Angolan Kwanza'>AOA</option>
<option value='ARS' title='Argentine Peso'>ARS</option>
<option value='AUD' title='Australian Dollar'>AUD</option>
<option value='AWG' title='Aruban Florin'>AWG</option>
<option value='AZN' title='Azerbaijani Manat'>AZN</option>
Then, using jQuery, I load options inside the two select tags with the same instruction with different class selector:
$(".c_select1").load("options.html");
I'd like to display as default selected option two different values (since I need to show a currency converter).
I've tried in 2 different ways, but any of these works fine (I show the code for just one).
<script type="text/javascript">
$(".c_select1").load("options.html");
$(".c_select1 option[value=ARS]").prop("selected", true);
</script>
or
$(".c_select1").val("ARS");
I don't know why, but I think there is a problem with the .load() of jQuery.
The only solutions that work are 2:
set a timer and execute the second jQuery statement after this timer
use 2 different options.html files one for each select tag, but I think it is not so clever.
Is there a better way to do this dynamically?
Try this:
$(".c_select1").load("options.html", function(){
$(".c_select1").val("ARS");
});
Explained:
The .load() jQuery method requires some time to get the contents of options.html (even if its just a few milliseconds). The browser doesn't wait for it before continuing to run the rest of the javascript logic. The function(){ I added to your .load( method call is some javascript logic that runs AFTER the results have returned (aka a "callback").
Use a callback :
$(".c_select1").load("options.html", function() {
$(".c_select1").val("ARS");
});
$(".c_select2").load("options.html", function() {
$(".c_select2").val("ARS");
});
Actually there is a delay of load method that is why selected item is not working. Like #Joulss said use callback method that should work. You can see the here.
$(function(){
$(".c_select1").load("option.html", function() {
$(".c_select1").val("AFN");
});
$(".c_select2").load("option.html", function() {
$(".c_select2").val("ANG");
});
});
Demo
How to add static option that represents a link to other page using ng-options.
<select class="form-control"
ng-model="person"
ng-options="person.name for person in persons">
</select>
I am using select element with ng-options with predefined list of persons, where person is an object. I tried to use ng-repeat instead but this approach does not work:
<select ng-model="person" onChange = "window.location.href=this.value">
<option value="#/home">Anywhere</option>
<option value="#/current" ng-repeat="person in persons">{{person.name}}</option>
</select>
Varibale $scope.person gets the value "#/current". In this case linking works, but ng-model fails. Variable $scope.person should represent the selected person.
What I am expecting is that $scope.person has selected value, unless user choose "Anywhere", in which case he should be redirected to another page.
"#/home" and "#/current" represent the url location. "#/home"is a home page and "#/current" is a current page. onChange event redirects user to home page or reloads current page.
So when user select "Anywhere" he should be redirected to home page. For any other option user´s page won´t be changed.
First of all you should not mix native js and angularjs unless you know what exactly going on.
Use ng-change instead of onchange and check the value if it is value of 'Anywhere'. If it is then route, otherwise do nothing. In your approach you're redirecting in both cases.
<select ng-model="person" ng-change="selectHandler()">
<option value="">Anywhere</option>
<option value="{{prsn}}" ng-repeat="prsn in persons">
{{prsn.name}}
</option>
</select>
$scope.selectHandler = function(){
if($scope.person == ''){
console.log("route to /home");
//ROUTE WITH $location.path
}
}
Here is a working FIDDLE for demo.
in your ng-repeat try, you wrote:
ng-model="person"
which doesn't exist (because you do ng-repeat="person in persons")
try
ng-model="persons"
First of all, thanks for reading the topic.
Now, I'm making a website using HTML5 and I need to load a text file according to the user choice in a combobox. I mean, the user selects an option from the combobox and the text from it should shown on a specific cell of a table. The number of times that the user wants without refreshing the site.
The problem is that the code is not working. The code:
The HTML for the combo box:
<select id = "comboSelect">
<option value="text1.txt">text1</option>
<option value="text2.txt">text2</option>
<option value="text3.txt">text3</option>
<option value="text4.txt">text4</option>
<option value="text5.txt">text5</option>
</select>
The HTML for the table cell:
<td colspan="5" class="text" id = "cuadroTexto"></td>
The JavaScript that does the rest of the work:
$(document).ready(function(){
document.getElementById("comboSelect").addEventListener('change',function () {
$(document.getElementById("cuadroTexto")).load(value);
alert("Cargado");
},false);
});
Edit 1:
I think that the JavaScript is not recognizing the change event from the combobox.
I'm yet not working with a server.
Check this is working
CODE
$(document).ready(function(){
$("#comboSelect").change(function () {
$("#cuadroTexto").load(this.value);
alert($(this).val())
});
});
Fiddle http://jsfiddle.net/krunalp1993/Qr6GK/
I'm attempting to create a dynamic drop down list, but after searching for hours I'm still completely stumped as to how to do it. So I am experimenting with variables in a list. This is the code I've started with.
<body>
<form method = "post">
<select id = "State" onchange = "a = this.options[selectedIndex].value;">
<option value = ""> Select a state</option>
<option value = "S3"> Pennsylvania</option>
<option value = "S4"> California</option>
<option value = "I4"> Texas</option>
<option value = "I5"> New York</option>
</select>
</form>
</body>
my question is what can I do with the variable 'a' so that I could create a dynamic drop down list based off it? One thing I had hoped to do was use an if-statement to display a second list. I wanted to remain on the same page too.
Note: I apologize if this seems like a basic question, but I've been scouring websites for answers and all I've figured out was that I can't send javascript variables to php, otherwise I'd have gotten this done forever ago
try this way
<select id="appamt" name="appamt">
<? while($amt=mysql_fetch_array($amount)){ ?>
<option value="<?=$amt['amount']?>"><?=$amt['amount']?></option>
<? } ?></select>
When your page detects the onchange event, what you need to do is either have all the combinations of options you want readily available but hidden on the page e.g. $('#sub-option1).hide(); and when the value is selected use $('#sub-option1).show();
Secondly you can have a ajax request that returns a JSON value of key=>value pairs, then use these key value pairs to dynamically build another dropdown using jquery .each() function.
Loop through your json values and add them to a previously hidden selector and then display it.
Hope this helps but if not email me and I will skype you through it.
Jim C
I am currently trying to work out an experiment of mine with using this site:
http://store.nike.com/us/en_us/pd/lunarglide-5-running-shoe/pid-726047/pgid-726952
What I am trying to accomplish is that, a default shoe size will be entered by user on the chrome extension end and once they hit this page, it will auto click the right size and click add to cart.
I have accomplished all this except it wont submit, it tells me to add a shoe size.
The Gif:
$(document).ready(function(){
checkForData();
$('.add-to-cart').trigger('click');
});
function checkForData()
{
$('ul.footwear li').removeClass("selectBox-selected");
chrome.storage.local.get('value', function (results) {
$('ul.footwear').find('a').filter(function(idx, el){
return $.trim($(this).text()) == $.trim(results.value);
}).closest('li').addClass('selectBox-selected');
$("a.footwear span.selectBox-label").text("("+$.trim(results.value)+")");
});
}
if you look at ..}).closest('li').addClass('selectBox-selected'); I have tried using a trigger event as if it was clicked but nothing happens so I just gave it the class that it would have if someone clicked it.
David
There's a select input in there as well..
<select name="skuAndSize" class="size-dropdown mediumSelect footwear selectBox" style="display: none;">
<option value=""></option>
<option class="size-not-in-stock" name="skuId" value="3096786:6">6</option>
<option class="size-not-in-stock" name="skuId" value="3096787:6.5">6.5</option>
<option name="skuId" value="3096788:7"> 7</option>
<option name="skuId" value="3096789:7.5" selected="true"> 7.5</option>
..........
..........
</select>
My guess is you need to be selecting an option here before you try to submit. After all it's the variable here that will get posted in the form. What you appear to be doing is just changing the DOM UI.
Adding this might work:
$("select[name='skuAndSize']").val("3096789:7.5");