|
JavaScript - Assigning Indices Of Options In A Select Menu In Ie
*Edit: I thread title should probably be "Initialize indices..."*
I've done quite a bit of research but couldn't find what I need to know so here I am. I have some javascript generated by php that reads a configuration file to add options to a select menu. This is somewhat irrelevant but... these options are removed from the menu when clicked and data related to the option is shown on the page... and the option gets re-added when the data is closed. I need the option to go back in the correct place/order in the select menu... which wouldn't be a problem if I could initialize the indices of the menu's options. They need to be initialized because when the page is created, saved settings are read and certain options are not shown in the list because they may already be shown according to the settings... meaning... since browsers automatically increment the indices of the options by 1 (starting at 0), if data is closed that was initially open and therefore not in the select menu at first... the key/index associated with that data will likely not match the correct menu order. Code: <script type="text/javascript">
function addOptionToSelect(selectID,index,offset,val,txt) {
var elSel = document.getElementById(selectID);
elSel.options[index+offset].value = val;
elSel.options[index+offset].text = txt;
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
<?php
foreach ($props as $k => $prop) {
if (!in_array($prop, $_SESSION['crProps'])) {
?>
addLoadEvent(addOptionToSelect('propertySelect',<?php echo $k; ?>,1,'?p=<?php echo $prop; ?>&k=<?php echo $k; ?>','<?php echo $prop; ?>'));
<?php
}
}
?>
</script>
For example, suppose I have the following potential data sets: a,b,c,d,e,f In the config file that helps create the page, suppose it is something like: <Default>0:a|2:c|3:d</Default> (FYI: I've designed it so that the data set names/options are separated by the pipe character ("|") and their corresponding index is the number to the left of the colon.) Then the select menu that is initially generated would be something like: (Every other data set name except for what is already open by default.) <select id="bleh"> <option value="b">b <option value="e">e <option value="f">f </select> And by default, browsers would assign the indices like so: (skipping getElementById and all that...) select.options[0].value = b select.options[1].value = e select.options[2].value = f Whereas, I need it to be initialized like this: select.options[1].value = b select.options[4].value = e select.options[5].value = f So that when the data sets initially open are closed (a, c, or d)... they get put in the correct position in the list. I just thought of something... it's a little inefficient (OCD lol) but it should work and at worst would only cost a couple of milliseconds of processing time. A solution to this problem might be to load the menu with all options so that their indices are correct... and remove the defaults afterward. I'll try it. Similar TutorialsI've been having problems getting my select option to change the options of another select option. I'm not much of a javacsript coder, so I'm at a lost. When I select the first option nothing appears in the second option. here's the javascript code: Code:
function createOption(OptionText, OptionValue){
var temp = document.captcha_form("option");
temp.innerHTML = OptionText;
temp.value = OptionValue;
return temp;
}
function valChange(){
var firstList = document.getElementById("emailaddress");
var secondList = document.getElementById("subject");
while(secondList.hasChildNodes())
secondList.removeChild(secondList.childNodes[0]);
switch(firstList.value){
case "1":{
secondList.appendChild(createOption("Report Site Browsing Issue", Report Site Browsing Issues));
secondList.appendChild(createOption("Report Page Errors", Report Page Errors));
secondList.appendChild(createOption("Other", Other));
break;
}
case "2":{
secondList.appendChild(createOption("Report Unauthorized Game", Report Unauthorized Game));
secondList.appendChild(createOption("Report Spam", Report Spam));
secondList.appendChild(createOption("Report Harassment", Report Harassment));
secondList.appendChild(createOption("Report Illegal Activities", Report Illegal Activities));
secondList.appendChild(createOption("Request Account Removal", Request Account Removal));
break;
}
// ....
default:{
secondList.appendChild(createOption("Please select from the first list", ""));
break;
}
}
}
window.onload = valChange;
this is the form code Code: <div class="mailto_form"> <form method="POST" id="captcha_form" name="captcha_form" action="../includes/mailform.php"> <div style="padding-bottom: 1em;">Choose Recipient: <select name="emailaddress" id="emailaddress" onchange="valChange();"> <option value=""></option> <option value="1">Webmaster</option> <option value="2">Admin</option> </select> </div> <div style="padding-bottom: 1em;">Subject: <br /><select name="subject" id="subject"> </div> <div style="padding-bottom: 1em;">From: <br /><input type="text" name="email" id="email" value=""> </div> <div style="padding-bottom: 1em;">Enter the text contained in the image into the text box: <br /><img src="../includes/captcha.php" /> <br /><input type="text" name="userpass" value=""> </div> <div style="padding-bottom: 1em;">Message: <br /><textarea name="message" id="message" rows="10" cols="60"><?php echo "</tex" . "tarea>"; ?> </div> <div style="padding-bottom: 1em;"><input name="submit" type="submit" value="Submit"> </div> </form> </div> Link to the page http://www.netgamegurus.com/contact/ Hey chaps, hope someone can help with this: I have a PHP form, with a couple of dynamic Select menus, which are populated from two SQL tables: // tbl_main_colour: Code: ID, NAME 1, Red 2, Blue 3, Green // tbl_shade_colour: Code: ID, NAME, FK_MAIN_COLOUR_ID 1, Light Red, 1 2, Dark Red, 1 3, Light Blue, 2 4, Dark Blue, 2 5, Light Green, 3 6, Dark Green, 3 What I'm after is something to filter the second select option, after the first select option has been chosen // Select 1: Code: Red // Select 2: Code: Light Red Dark Red I'm pretty sure this is possible, but not sure how to go about it, any help would be most appreciated. Hello, I am trying to make a simple code that has a selection list (with the choice fruit or veggie). When the user chooses fruit, the second list displays the options apple, orange, banana. When the user changes their choice to veggie, the second select list then contains carrot, corn, potatoes (and the apple, orange, banana disappear). I need some advice on how to do this Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body> <form name = "form1"> <fieldset> <legend>Fruit or Veggie</legend> <select name = "S1"> <option name = "fruit">Fruit </option> <option name = "veggie">Veggie</option> </select> <select name = "S2" </select> </fieldset> </form> <script language="JavaScript" type="text/javascript"> ??? </script> </body> </html> I have a select box that has ~7000 options, that based on a different dropdown select & input field, gets filtered to 0 - 300 entries. I have another select dropdown that has 13000+ options in total for all the ~7000 entries, but each entry may have 1 to 5 options of these 13000. Is there a way to change the options of the last select dropdown based on what the user chooses in the filtered select box? Currently the idea I'm having is to have the browser load all 13000+ items and filter out the ones that don't apply to the currently selected item, but I'm not sure what kind of lag the user would experience while the browser loads & filters through all these items. Any help would be appreciated. Thanks. Hello! I'm trying to figure out a way of having + and - buttons which cycle through the options in a select box such as: <select name="distance" id="jr_radius"> <option value="0.5">0.5 Miles</option> <option value="1">1 Mile</option> <option value="3" selected="selected">3 Miles</option> <option value="5">5 Miles</option> <option value="10">10 Miles</option> </select> So far I've only been able to have a button change the select box to a specific value, or add or subtract to a numerical value. Both of which aren't quite right. Ideally if the default value is "3" then clicking the + button could make it "5" and clicking the same button again would make it "10". Visa versa, the minus button would make the value "1" and then if pressed again it would become "0.5". Does that make sense? Any help will be greatly appreciated! If i have an existing HTML Select statement with options specified, and then based on an even, i want to rebuild that options list, how do I wipe the existing options parameters in order to add new ones? Is that even possible?
This code is supposed to batch transfer options between selects. It works flawlessly for single values, but when I select multiple options, all of them get deleted, but only one transferred. Any help is greatly appreciated! Thank you. Code: <html>
<head>
<title></title>
<script type="text/javascript">
function removeOptionSelected(b,j)
{
var elRem = document.getElementById(b);
var elAdd = document.getElementById(j);
var elOptNew = document.createElement('option');
var i;
for (i = elRem.length - 1; i>=0; i--) {
if (elRem.options[i].selected) {
//alert(elRem.options[i].text+' '+elRem.options[i].value+' deleted!')
elOptNew.text = elRem.options[i].text;
elOptNew.value = elRem.options[i].value;
try {
elAdd.add(elOptNew, null); // standards compliant; doesn't work in IE
}
catch(ex) {
elAdd.add(elOptNew); // IE only
}
elRem.remove(i);
}
}
}
</script>
<style type="text/css">
div {
float: left;
/*border: 1px solid black;*/
}
div.contain {
width: 536px;
height: 500px;
border: none;
}
div.side {
width: 215px;
height: 500px;
}
div.middle {
width: 100px;
height: 300px;
padding-top: 200px;
}
select {
width: 200px;
height: 500px;
}
input {
width: 82px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="contain">
<div class="side">
<form name="left">
<select id="left" class="left" multiple name="out">
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="orange">orange</option>
<option value="tangerine">tangerine</option>
<option value="pineapple">pineapple</option>
<option value="carrot">carrot</option>
<option value="grapefruit">grapefruit</option>
<option value="plum">plum</option>
<option value="blueberry">blueberry</option>
<option value="strawberry">strawberry</option>
<option value="cashews">cashews</option>
<option value="peanuts">peanuts</option>
</select>
</form>
</div>
<div class="middle">
<input type="button" value="Add-->" onClick="removeOptionSelected('left','right');" />
<input type="button" value="<--Remove" onClick="removeOptionSelected('right','left')" />
</div>
<div class="side">
<form name="right">
<select id="right" class="right" multiple name="out">
<option value="greenbeans">greenbeans</option>
<option value="walnuts">walnuts</option>
</select>
</form>
</div>
</div>
</body>
</html>
Hi all, I have table in Javascript and it has addrow, deleterow, submit, and functions. when i click it automatically adds new row and it has select option to choose some of them for ex. in added two rows and one of drop down combox i chose Motherboard Asus and from other i chose Motherboard Gigabyte. So i need once i select the name from combobox, should not allow user to select same name in coming rows Here is my code. Thanks beforehands PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head><title>dinamik sheet</title> <script> var i=iteration; function addrow(){ var tbl = document.getElementById('sheet'); var iteration = tbl.rows.length; document.getElementById('count_rows').value = iteration; var row=tbl.insertRow(iteration); var cellLeft = row.insertCell(0); var textNode = document.createTextNode(iteration); cellLeft.appendChild(textNode); var cellRight = row.insertCell(1); var el = document.createElement('input'); el.type = 'text'; el.name = 'txtRow'+iteration; el.id = 'txtRow'+iteration; el.size = 15; el.value = '0'; el.onblur = sum; cellRight.appendChild(el); var cellRight = row.insertCell(2); var elaz = document.createElement('input'); elaz.type = 'text'; elaz.name = 'txtRowaz'+iteration; elaz.id = 'txtRowaz'+iteration; elaz.size = 20; elaz.value = '0'; elaz.onblur = sum; cellRight.appendChild(elaz); var cellRight1 = row.insertCell(3); var ela = document.createElement('input'); ela.type = 'text'; ela.name = 'txtRowe'+iteration; ela.id = 'txtRowe'+iteration; ela.size = 20; ela.value = '0'; ela.onblur = sum; cellRight1.appendChild(ela); var cellRightsel = row.insertCell(4); var sel = document.createElement('select'); sel.name = 'selRow' + iteration; sel.id = 'selRow' + iteration; sel.onchange = sum; sel.options[0] = new Option('MotherBoard ASUS', 'MotherBoard ASUS'); sel.options[1] = new Option('MotherBoard Gigabyte', 'MotherBoard Gigabyte'); sel.options[2] = new Option('MotherBoard MSI', 'MotherBoard MSI'); sel.options[3] = new Option('Graphiqcard ASUS', 'Graphiqcard ASUS'); sel.options[4] = new Option('GraphigCard ATI', 'GraphigCard ATI'); sel.options[5] = new Option('GraphigCard GefORCE', 'GraphigCard GefORCE'); cellRightsel.appendChild(sel); sum(); } function removeRowFromTable() { var tbl = document.getElementById('sheet'); var lastRow = tbl.rows.length; if (lastRow > 2) tbl.deleteRow(lastRow - 1); } function sum(){ var s1 = 0; var s2 = 0; var tbl=document.getElementById('sheet'); var iteration=tbl.rows.length-1; for(var i=1; i<=iteration; i++){//loop through table rows var el1 = document.getElementById('txtRow'+i);//Row's Income field var el2 = document.getElementById('selRow'+i);//Row's percentage menu var ela = document.getElementById('txtRowe'+i);//Row's Tax cell var elaz=document.getElementById('txtRowaz'+i); if(!el1 || !el2 || !ela||!elaz) continue; var txt = el1.value; if(txt != ( '' + Number(txt) )) continue; //reject non-numeric entries var tax = Number(txt) * Number(130); if(el2[el2.selectedIndex].value=="MotherBoard Gigabyte"){ var tax = Number(txt) * Number(150); } if(el2[el2.selectedIndex].value=="MotherBoard MSI"){ var tax = Number(txt) * Number(100); } if(el2[el2.selectedIndex].value=="Graphiqcard ASUS"){ var tax = Number(txt) * Number(85); } if(el2[el2.selectedIndex].value=="GraphigCard ATI"){ var tax = Number(txt) * Number(95); } if (el2[el2.selectedIndex].value=="GraphigCard ATI") { var tax = Number(txt) * Number(88); } ela.value = tax.toFixed(2); elaz.value=tax.toFixed(2)/Number(txt); if(isNaN(elaz.value)){ elaz.value=0; } s1 += Number(txt); s2 += tax; } var t1 = document.getElementById('total'); var t2 = document.getElementById('taxtotal'); if(t1){ t1.value = s1.toFixed(2); } if(t2){ t2.value = s2.toFixed(2); } } onload = function(){ addrow(); } </script> </head> <body> <form name="eval_edit" method="POST" action="part1.php?id=iteration-1"> <table align="center" width="75%"> <tr> <td align="center">Balance sheet</td></tr> <tr> <td align="center"> <table id="sheet" border="1"> <tr><td>object</td><td>Total amount</td><td>One ITEM Price</td><td name="amount">Total Item Price </td><td>Name</td></tr> </table> </td> </tr> <tr> <td align="center"> <input type="hidden" name="count_rows" id="count_rows" /> <input type="button" value="Add" onclick="addrow()" /> <input type="button" value="Remove" onclick="removeRowFromTable()" /> <input type="button" value="SUM" onClick="sum()"/> <input type="submit" value="Submit" /><br /> </td> </tr> <tr> <td align="left"> <input id="total" name="total" type="text"/>total amount of products<br /> <input id="taxtotal" name="taxtotal" type="text"/>total price of products </td> </tr> </table> </form> </body> </html> Hey guys.... me again.... tried doing this a few different ways but it seems no matter what I do the last option won't remove for some reason..... if it's the only option, it won't remove either. as it's the last one. Here is my code.. PHP Code: function removeCats() { // Set selected category list var sel_cats = document.getElementById('cat_sel'); for (i = sel_cats.length-1; i >= 0; i--) { // Check if the cat is selected if (sel_cats.childNodes[i].selected == true) { // Remove the category sel_cats.removeChild(sel_cats.childNodes[i]); } } } Thanks again guys! all i have to do is the image to change automatically based on the option you selected from the drop down list. here is the code, any help is appreciable. thanks in advance. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> img{ height:95px; width:95px; display:block; margin-top:10px; } #caption{ font-family:Verdana,tahoma,arial; font-size:8pt; text-align:left; display:block; width:250px; } </style> <script type="text/javascript"> window.onload=function() { var caption=['Default Image Caption', 'begonia', 'daffodils', 'mixture', 'natural', 'purple', 'red flower', 'sunflower', 'tulip', 'two flowers'], // This will be your images caption bp='..\images', //base url of your images imgnum=9, //Number of your images. This should match on your comboboxes options. thumb=document.getElementById('thumb'), //id of your image that will be changing description=document.getElementById('caption'), //id of your caption combobox=document.getElementById('selection'); // id of your combobox. combobox.onchange=function() { thumb.src=bp+'Picture'+this.value+'.jpg'; description.innerHTML=caption[this.value]; } } </script> </head> <body> <label>Please Change the pictu </label> <select id="selection"> <option>Change Picture</option> <option value="1">begonia</option> <option value="2">daffodils</option> <option value="3">mixture</option> <option value="4">natural</option> <option value="5">purple</option> <option value="6">red flower</option> <option value="7">sunflower</option> <option value="8">tulip</option> <option value="9">two flowers</option> </select> <br> <img src="..\images" alt="mypic" id="thumb"> <span id="caption">Caption for the default Image</span> </body> </html> thanks again Hello, I just joined the forum. I'm hoping someone could help me out or point me in the right direction. I am trying to set up a simple interaction for users. The user would be required to select a width then height from two separate drop down menus. I used this as an example to work from: http://www.w3.org/TR/WCAG20-TECHS/wo...dynselect.html The list of heights would not be available until the user selects a width.(similar to the example link above). Each width would have slightly different heights associated with it. After the user selects a width then height an image would be displayed based on that combination. So for example if the user selects 12w/30h they would see "01.jpg" if the user selects 12w/36h they would see "02.jpg". This would all be done on the same page. The user should be able to update the image by combining the different width/height options indefinitely. If anyone has a link to an example or can provide a basic structure I could build of off I would be extremely grateful, thanks. Hi there, I am a new javascript guy - struggling a bit but marching on - The following code works fine to set a form field - Code: document.getElementById("ZS_Land").value = (empLand.innerHTML);
However, I changed to form field into a select with option list, and I need it to set an option from the select now - the select has the same name/id as the field had, but is not working Any ideas how I do that ? Many thanks in advance Glorifindal Dear all, background information: I did code a timesheet management system for my company with PHP where the user has to submit time entries and has an online form with several start and end times. The start and end times are all simple HTML select option dropdowns. I want that the first End time selection will be the next start time selection. Basically a simple dependency of the dropdown. My approach was that I want to solve this with JavaScript. In my php code I am echoing the following (in this select the end times are the values): echo "<select class='normal' name='$field_id' onChange=set_time_hour(this.value,'$field_id_js')>"; When the user changes then the end time dropdown the next field (next start time entry) should be changed accordingly. The javascript looks like this function set_time_hour(hour_value,next_field){ alert (hour_value); alert (next_field); document.getElementById(next_field).value = hour_value; } The alert calls are giving me the right values. but the document.getElementById(next_field).value = hour_value; is not working. What is wrong there? Do you have an idea? How can I change the value of a select box with Javascript? The select box values are already popoluated with PHP so I just want to select the right value. Hi All, I have a javascript function which adds a label and value to a select widget in its parent window. The function is working fine in firefox and chrome without any errors or warnings. But it is not working in internet explorer. Please tell me what the issue is. Thanks in advance for your help. Code: function addToParent( formName, selectName, name, label ) {
var parent = window.opener;
var selectWidget = parent.document.forms[formName].elements[selectName];
if( selectWidget ) {
var length = selectWidget.length;
selectWidget[length] = new Option( name, label, false, false );
}
}
When I tried to debug, internet explorer shows an error in the following line Code: selectWidget[length] = new Option( name, label, false, false ); Is there anything wrong with this statement ?? Hi! I have the following javascript and accompanying html but the i keep getting the error: Unable to get value of the property 'options': object is null or undefined pointing to this line of the code " $thisSelectedValue = $formField.options[ $formField.selectedIndex ].value;" Can someone help me please... thanks in advance. Javascript Code: <script type="text/javascript">
$allValues = new Array();
$allValues[0] = 'Choose One';
$allValues[1] = 'A1';
$allValues[2] = 'A2';
$allValues[3] = 'A3';
$allValues[4] = 'A4';
$allValues[5] = 'A5';
function stripDupelicateValues(inElementId)
{
// get current list of all selected values
$selectedValues = new Array();
for( $position in $allValues )
{
if( $position != 0 )
{
$formField = eval( 'document.crewchange.emp_' + $position );
// preserve our selected values
$thisSelectedValue = $formField.options[ $formField.selectedIndex ].value;
$selectedValues[$thisSelectedValue] = true;
}
}
for( $position in $allValues )
{
if( $position != 0 )
{
$formField = eval( 'document.crewchange.emp_' + $position );
// preserve our selected values
$thisSelectedValue = $formField.options[ $formField.selectedIndex ].value;
// wipe out the previous choices
$formField.options.length = 0;
// create default option
$formField.options[0] = new Option( $allValues[0], 0 );
for( $optionValue in $allValues )
{
// add each of our non selected values
if( $selectedValues[$optionValue] != true )
{
$formField.options[$formField.options.length] = new Option( $allValues[$optionValue], $optionValue );
}
// create the option for our selected value
else if( $thisSelectedValue == $optionValue )
{
$index = $formField.options.length;
if( $optionValue != 0 )
{
$formField.options[$index] = new Option( $allValues[$optionValue], $optionValue );
$formField.options[$index].selected = true;
}
}
}
}
}
}
</script>
Html Code: <form action="cc2.php" method="post" name="cc"> <select name='emp[]' id='emp_1' onChange='stripDupelicateValues(this.id)'> <option>Choose One</option> <option value='1'>A1</option> <option value='2'>A2</option> <option value='3'>A3</option> <option value='4'>A4</option> <option value='5'>A5</option> </select> </form> Error Msg Code: Message: Unable to get value of the property 'options': object is null or undefined My problem has to do with having more then two drop down menus and disabling selected items. In this example whenever anyone selects an option from either of the drop-down menus the opposing drop-down menu greys out the selection: Code: <script type="text/javascript">
function updateSelect(changedSelect, selectId) {
var otherSelect = document.getElementById(selectId);
for (var i = 0; i < otherSelect.options.length; ++i) {
otherSelect.options[i].disabled = false;
}
if (changedSelect.selectedIndex == 0) {
return;
}
otherSelect.options[changedSelect.selectedIndex].disabled = true;
}
</script>
Code: <select id="subject1" name="indication_subject[]" onchange="updateSelect(this,'subject2');" > <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> </select> <select id="subject2" name="indication_subject[]" onchange="updateSelect(this,'subject1');" > <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> </select> The above code works perfect. My problem is extending this to even more drop-down menus. I'm not a javascript guy but my logic was thinking something like this: Code: ARRAY = "subject1, subject2, subject3"; <select id="subject1" name="indication_subject[]" onchange="updateSelect(this,'ARRAY');" > ...either an array to include multiple drop-down menus or what about something like this? Code: <select id="subject2" name="indication_subject[]" onchange="updateSelect(this,'subject1, subject2, subject3, subject4');" > Obviously I know my code solutions don't work, however, I'm hoping they can provide someone with clarity with respect to what I'm trying to accomplish. I sincerely would appreciate anyone's help on this. Hi I have a form. In this form i have a pop down menu with 1,2,3,4,5 numbers in it. And after that i have 8 more form fields. what i want is when user select any number from pop down menu then these 8 fields should appear. for example when user select 2 from pop down menu then then these set of fields should appear twice i mean 8+8=16. and so on. my code is here Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<p>
<select name="jumpMenu" id="jumpMenu">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</p>
<p>
Type :
<select name="jumpMenu2" id="jumpMenu2" onchange="MM_jumpMenu('parent',this,0)">
<option value="Delux">Delux</option>
<option value="king">king</option>
<option value="exe">exe</option>
</select>
</p>
<p>
<label>Number:
<input name="textfield" type="text" id="textfield" size="5" />
</label>
</p>
<p>
<label>Name:
<input type="text" name="textfield2" id="textfield2" />
</label>
</p>
<p>Date Arr:
<label>
<input type="text" name="textfield3" id="textfield3" />
</label>
</p>
<p>Dep Date:
<label>
<input type="text" name="textfield4" id="textfield4" />
</label>
</p>
<p>
<label>
<input type="checkbox" name="checkbox" id="checkbox" />
Extra</label>
</p>
<p>
<label>
<input type="checkbox" name="checkbox2" id="checkbox2" />
Park</label>
</p>
<p>Remarks:
<label>
<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
</label>
</p>
</form>
</body>
</html>
how this can be done in js Hello all! I'm about to use this script below for a project I have. It works great but unfortunately I can't get it to read select menu (selected option) values. It returns undefined. I've asked the author but had no response as yet, so I was wondering if anyone else could see why it wouldn't read the select menu value. Code: var functionname = function () {}
functionname.prototype = {
options : {},
generateShortCode : function() {
var content = this['options']['content'];
delete this['options']['content'];
var attrs = '';
jQuery.each(this['options'], function(name, value){
if (value != '') {
attrs += ' ' + name + '="' + value + '"';
}
});
return '[googleMap' + attrs + ']' + content + '[/googleMap]'
},
sendToEditor : function(f) {
var collection = jQuery(f).find("input[id^=myplugin]:not(input:checkbox),input[id^=myplugin]:checkbox:checked");
var $this = this;
collection.each(function () {
var name = this.name.substring(9, this.name.length-1);
$this['options'][name] = this.value;
});
send_to_editor(this.generateShortCode());
return false;
}
}
var myfunction = new functionname();
I have two select menus, the second menu items should be determined based on the selected item of the first menu, and the problem I face is about using document.write() in adding the select menu items, when I write the items like this it work: Code: <select name="cities" >
<script type="text/javascript">
document.write("<option value=''>city1</option>");
document.write("<option value=''>city2</option>");
document.write("<option value=''>city3</option>");
</script>
</select>
but when I put them in a function they wrote as a text not a menu item, and I must use a function and use if or switch in it, so what's the solution? Hi I wanna to have two select boxes, one of them will contain a list of provinces, and on the other I wanna have a list of cities, but based on selected province. When province selects, cities select box must be changed, too. I don't wanna use AJAX for this purpose, as the server is already too busy and I don't like to disturb it more. So if anyone can provide a solution, just by Javascript and not with AJAX, I would be appreciate it. Cheers! |
|||||||