|
JavaScript - Buttons Do Not Refresh When An Option From Drop Down Menu Changes
This is hopefully my last jquery question. I have a slight issue with my buttons and dropdown menu. What happens is lets say user chooses option type "ABCDE" in first dropdown menu and then second dropdown menu chooses the value "4" for the number of answers and then clicks on the buttons "A","B","C" and "E", well if the user then decides to change the option type to "ABC", the buttons "A", "B" and "C" are still selected from the last time they have been selected.
What I want is that if the Option Type (OptionDropId) changes, then buttons selected is refreshed so no buttons are selected from the last time they have been selected. This did used to work but when I included my change() event handler in my code which I need, the buttons do not refresh whenever a new dropdown option (OptionDropId) is selected. So I think the edit of the code may need to happen in the code below: Code: $(document).ready(function ()
{
var OptDrop = new Array();
OptDrop.abc = ["",1,2];
OptDrop.abcd = ["",1,2,3];
OptDrop.abcde = ["",1,2,3,4];
OptDrop.trueorfalse = [1];
OptDrop.yesorno = [1];
$("#optionDropId").change(function ()
{
var selectedValue = $(this).val();
$("#numberDropId").html("");
$.each(OptDrop[selectedValue], function (x, y)
{
$("#numberDropId").append($("<option></option>").attr("value", y).html(y));
});
});
$("#optionDropId").change();
});
My code is in JSfiddle, (the second dropdown menu and buttons may not appear in JSFiddle but the code does work properly, I feel it is better displaying code in JSfiddle then in my questions as it will take up a lot of space. If you want to see working version then post code in your web document and it should work). My Code: [click below][1] [1]: http://jsfiddle.net/XZ7um/10/ Similar TutorialsHello everybody, I have a javascript adding new options to a drop down select menu getting the information from the database. The code is as written below: Code: function setOptions1() {
var selbox2 = document.egitimgiris.alttipID;
selbox2.options.length = 0;
selbox2.options[selbox2.options.length] = new Option('Option1','22')
selbox2.options[selbox2.options.length] = new Option('Option2','23')
selbox2.options[selbox2.options.length] = new Option('Option3','24')
selbox2.options[selbox2.options.length] = new Option('Option4','25')
}
I want one of them to be added as selected. I will put an "if" check and if it the value of the option and the value in the database is equal I want that option to be added as "selected". Is this possible? If yes, how? Please help. Thanks and regards telmessos have a scenario where I show a drop-down-with-few-items in a JSP page, to the user. The length of few options in the drop down is greater than that of the drop down's, hence our requirement is to show the hovered (not selected) option as tooltip for user's convenience. I cannot use the title attribute option as its not compatible with my web browser I have a scenario where I show a drop-down-with-few-items in a JSP page, to the user. The length of few options in the drop down is greater than that of the drop down's, hence our requirement is to show the hovered (not selected) option as tooltip for user's convenience. I am not able to use title attribute for displaying tooltips in my browser. Now the code in http://dossett.org/11/No_onmouseover_for_options_in_IE/ implements a tooltip for multiple select drop down menu.Can you modify the code for single select Hello all, I am currently looking to create a JavaScript menu for a website I am working on. It currently expands and collapses on click. The code in question is pasted below:- menu_status = new Array(); function showHide(theid){ if (document.getElementById) { var switch_id = document.getElementById(theid); if(menu_status[theid] != 'show') { switch_id.className = 'show'; menu_status[theid] = 'show'; }else{ switch_id.className = 'hide'; menu_status[theid] = 'hide'; } } } As you can see, it basically shows and hides the menu (when clicked). I want it to open the menu when clicked and close when another menu is opened. I have looked and have not been able to find a solution into it. Ideally I donot want it to be a long piece of code as I do have a working menu but with many more lines of JavaScript than the one I have posted. I need a solution to it urgently, your help is appreciated. Thanks I am trying to make some option buttons that will change the background of the document.I have already styled the body with an image using document.body.style.background I am now trying to make some option buttons that will make the background repeat or be placed to the center. Here are the buttons: Code: <select> <option type="button" selected="selected" onclick="tile()">Tile</option> <option type = "button" onclick = "center()" >Center</option> </select> And the functions: Code: function tile() {
document.body.style.backgroundRepeat="repeat";
}
function center() {
document.body.style.backgroundRepeat="no-repeat";
document.body.style.backgroundPosition="center";
}
However it doenst work i'm working with a city select option, a hotel select option & an iframe. the hotel select option is populated depending on the chosen city which then updates the iframe src. this is all working fine. the trouble im having is that when the page is refreshed, normal f5 way, the hotel option changes whereas the city option & the iframe src remains the same?? this problem does not occur on a force refresh via control + f5 as then both select options & iframe src revert to their original state. I don't want the city option to change upon a normal page refresh. how do I go about this? below are the city, hotel select options & iframe Code: <form name="hotelslist" id="hotelslist">
<select id="cities" name="cities" onChange="hotel_list(hotelslist.cities.selectedIndex);loadHotel();">
<option value="Baddeck">Baddeck</option>
<option value="Banff">Banff</option>
</select>
<select id="hotelnames" name="hotelnames" onChange="loadHotel();">
<option value="Inverary Resort, Baddeck">Inverary Resort, Baddeck</option>
</select>
</form>
<iframe name="hotelframe" id="hotelframe" src="http://www.google.com" scrolling="no" width="660" height="1000" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0"> <p>Your browser does not support iframes.</p> </iframe>
below is my javascript functions Code: function loadHotel() {
var destURL = document.hotelslist.hotelnames.options[document.hotelslist.hotelnames.selectedIndex].value;
window.frames["hotelframe"].location = destURL; }
var i;
function hotel_list(i){
var hotelslist = document.getElementById("hotelslist");
hotelslist.hotelnames.options.length=0;
switch(i)
{
case 0: //Baddeck
hotelslist.hotelnames.options[0] =new Option('Inverary Resort, Baddeck','http://www.test0.com');
break;
case 1: //Banff
hotelslist.hotelnames.options[0] =new Option('Banff Caribou Lodge & Spa','http://www.test1.com');
hotelslist.hotelnames.options[1] =new Option('Banff Ptarmigan Inn','http://www.test2.com');
hotelslist.hotelnames.options[2] =new Option('Banff Rocky Mountain Resort','http://www.test3.com');
hotelslist.hotelnames.options[3] =new Option('The Rimrock Resort','http://www.test4.com');
hotelslist.hotelnames.options[4] =new Option('Fairmont Banff Springs','http://www.test5.com/');
break;
}
}
can some one please advise on a cross browser solution? thanks in advance. Omar. I know how to edit the CSS, and minute parts of the JavaScript code (for example; speed of the drop). The problem is, I had a massive amount of help making the Javascript side of the menu, and do not know how to edit it... I want the rules to still apply, where only one can be expanded at a time (one of the first drops, and then only one of the sub-drops). I noticed in the code, I can edit it so there can be more than one drop, but that would mean, the whole menu could be expanded Also, I want my sub-drops. to have different span colour than the main drop. but trhe links and such, (everything else about it) can be the same.... My live demo is here! Thank you for any help and/or advice in advance, Best Regards, Tim I want to use a <select> drop-down in a form to let my user select a date from a list. The problem is how to easily update the list. Easiest would be to have a list of dates in a separate file, and have code that would read the dates and write them into the <option> statements of the <select> control. Then when the page with the <select> control opens, the code will open the other file, get the dates, and update the <option>s. And all I have to do is periodically FTP a new date file. I'm stuck in Visual Basic and FileSystemObject, where I can open a file, read line by line into an array, concatenate a string, and write it into a doc. I can't seem to find similar methods in JavaScript - no duh, because this isn't VB! So _is_ there a way to do this? Maybe a certain way to create the date file so the code can easily find the values? (Like putting the dates into a table with each <TD> having a unique ID?) And assuming I manage to get the dates, I need to write them into the source HTML, vice in the document body. What objects, methods, properties do I look at? Are there any samples floating around out there? A drop-kick in a good direction is greatly appreciated! Ed Hey everyone, I am trying to create a form that changes depending on the selection from a drop down. I found this thread: http://codingforums.com/showthread.php?t=20516 but rather then hiding all other options it just shows a certain amount of options. I am looking for a drop down that has (for example) 10 options and each option displays a different form while hiding all other forms. I am also wondering if the form can change automatically when the user selects the option without reloading the page. Thanks for everyones help. If i have a drop down list on my website, and i want to use javascript to change its selected value, however, i do not have the id/name attribute of the option i want to select, only have the "value" attribute of the option, can it be done? <select name="category"> <option value="">No Preference</option> <option value="Apples">Apples</option> <option value="Oranges">Oranges</option> <option value="Pears">Pears</option> <option value="Banana">Banana</option> </select> I imagine somehow.. selecting the options and looping through them and match the value. Really new to javascript, can anyone advise? Thanks in advance! I have a button given like this: <a href="test.php"><input class="test" type="test"></a> I have a CSS that defined the button as an image, and on hover the button changes. However, on hover, I'd like there to come a drop down that for example link to test 1, test 2, test 3. Is this possible? Thank you! I have a radio button that asks Does your URL exist or need to be purchased? and a drop down menu that lists different types of web projects (i.e. new website and website redesign). What I'm trying to achieve is, if the user selects that the URL exists, I would like the drop down menu option new website to be removed from the list. Form: Code: <form> <input type="radio" name="website_status" value="exists"/> Exists <input type="radio" name="website_status" value="purchase_required"/> Needs to be purchased <select name="projects"> <option></option> <option value="new_website">New Website</option> <option value="website_redesign">Website Redesign</option> </select> </form> JavaScript: [CODE] <script> window.onload = initForms; function initForms() { for (var i=0; i<document.forms.length; i++) { document.forms[i].onsubmit = function() {return validForm();} } } function validForm() { var inputarray = document.getElementsByTagName("input"); var selectarray = document.getElementsByTagName("select"); var textarea = document.getElementsByTagName("textarea"); if (inputarray[0].checked == true) { selectarray[0].remove(options[1]); return false; } </script> I've been experimenting with this for the last couple hours and am getting nothing! Could someone please point me in the right direction? Hello. I'm really new to java script and could really use some help. What I'm trying to do is have 3 buttons on the header of my site fromm left to right. When one button is pressed a table or div drops down moving the site <body> and showing the content. Then if the same button is pressed it will close. Also when one of the other buttons are pressed the same drop down will happen and will close the others. Here is what I'm working with. This is one of the links/buttons. <div class="menu"> <ul> <li><a class="drop" href="#">Drop down</a></li> </ul> </div> This is what drops down <div id="dropdown" style="display:none;"> <div class="categories"><br/> <td>Content of drop here (100% with)</td> </div> </div> HEre is the java script $(document).ready(function(){$('a.drop').click(function(){$('#drop').toggle(200);return false;});$('a.refine').click(function(){ So this open and close (drop down drop up) fine but if I want three with the others closing when another is opened how would I do that? Hello. I am rying to give same name to the radio button options and those in the drop down list. It should look like in the picture below. It is obvious that the input names of all options (of radio buttons & in the dropdown list) should be the same. E.g. <input name="find"> Please help me with code Thank you. Tonight is one of those nights - which seem to be coming more often - where I just can't seem to do anything right. Here is the menu I'm using embedded in HTML: Code: <td width="40%" align="center"><font color="#000099"><b> <select id="Aircraft"> <option value="0">N148LH</option> <option value="1">N149LH</option> <option value="2">N150LH</option> <option value="3">N151LH</option> <option value="4">N152LH</option> <option value="5">N153LH</option> <option value="6">N155LH</option> <option value="7">N156LH</option> <option value="8">N157LH</option> <option value="9">N159LH</option> <option value="10">N162LH</option> <option value="11">N163LH</option> </select></b></font></td> Now I want to use that code to trigger default values for my Empty Weights. This is what I have and isn't working: Code:
var selectmenu=document.getElementById("Aircraft")
if (Aircraft=0) {
df.ew.value = 1569.41;
df.ew_mom.value = 135909.2;
}
if (Aircraft=1) {
df.ew.value = 1570.11;
df.ew_mom.value = 135929.76;
}
Any help is appreciated. If anyone is interested the page this is on is here. hi guys! i would like to know the script for me to auto select an option in a menu on a single click. so i have two pages. on the first page is the button. second page is the drop down menu. menu has selection "fruit" "vegies" "meat". by default fruit is selected. when i click on that button it will automatically select the menu on the second page for "meat". thanks!! Hi People, I've used the Concertina Menu from Stu Nicholls on one of my websites and am trying to get the Menu slider to slide up automatically after a certain time. Currently it only slides up on a mouseclick. The working link can be found at www.atomwhale.com/share/clients/branch/website/home.html Hope someone can help me in getting this to work. thanks, Jeriel. Hi Everyone, I want to create some web pages in asp.net on which I want to avoid the user to refresh the page. I have disabled the refresh options using key board event which are as follows: 1) F5 2) Ctrl + F5 3) Ctrl + R But I want to avoid user clicking on the Refresh Button of the browser. So please help me how can we disable the Browser Refresh button/menu using Javascript ? Thanks & regards, Anthony D'souza. I'm tearing my hair out with this one and can't figure out why it won't work, and am hoping someone could help a Javascript noobie out. Basically, I need the script to hide two divs if one of the options in a <select> menu is selected. Here's the code I've got for the Javascript: Code: function typeoflisting() {
var selectform = document.getElementById('propertytype');
if (selectform.options[selectedIndex].value == "sell") {
document.getElementById('per_week').style.display = 'none';
document.getElementById('bond').style.display = 'none';
}
else {
document.getElementById('per_week').style.display = 'block';
document.getElementById('bond').style.display = 'block';
}
}
Here's the <select> form: Code: <select id="propertytype" name="propertytype" class="select" onchange="typeoflisting()"> <option value="lease">I'd like to lease a property to tenants</option> <option value="sell">I'd like to sell a property</option> <option value="share">I'd like to share a property</option> </select> And here's the first div I'm attempting to hide: Code: <div id="per_week" style="float: left;"> per week</div> And the second div I'm attempting to hide: Code: <div style="float: left; padding: 20px 20px 0px 0px;" id="bond"> <h3>Bond</h3> <input type="text" class="text" value="$"/> </div> Could anyone please tell me what I'm doing wrong? |
|||||||