Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Javascript synchronized 3 <select>

Status
Not open for further replies.
tbogdan

tbogdan

Programmer
Apr 13, 2010
4
RO
Hello!

I have the attached html+javascript.
In it there are 3 <select>, synchronized.
But After I do some changes in boxes the script returns buggy result.

Please show me what is wrong, and help me in order to fix it.


Thanks in advanced!


(PS: Sorry for my English)
 
Sort by date Sort by votes
Maybe if you post just the relevant code and tell us what did you try so far ...

Cheers,
Dian
 
Upvote 0 Downvote
All code is relevant in order to meke script work, except html tags:
"<html>
<head>
</head>
<body>
</body>
</html>"

If I use only 2 synchronized select boxes with 2-3 options it works. When I extended the script to 3 select boxes it has functionality errors as you can see if you paste the code in *.html file and open whith your browser.

Ty for help!
 
Upvote 0 Downvote
Hi

Sorry, but it would be against my belief to correct that horrible script.

I suggest to rewrite it completely to make it more maintainable :
JavaScript: 
[b]var[/b] data[teal]=[/teal][teal]{[/teal]
  [green][i]'tip'[/i][/green][teal]:[/teal][teal]{[/teal]
    [green][i]'next'[/i][/green][teal]:[/teal][green][i]'marca'[/i][/green][teal],[/teal]
    [green][i]'21'[/i][/green][teal]:[[[/teal][green][i]'17'[/i][/green][teal],[/teal][green][i]'Aer conditionat'[/i][/green][teal]]],[/teal]
    [green][i]'20'[/i][/green][teal]:[[[/teal][green][i]'16'[/i][/green][teal],[/teal][green][i]'Aer conditionat'[/i][/green][teal]],[[/teal][green][i]'19'[/i][/green][teal],[/teal][green][i]'Aspirator'[/i][/green][teal]],[[/teal][green][i]'20'[/i][/green][teal],[/teal][green][i]'Cuptor microunde'[/i][/green][teal]]],[/teal]
    [green][i]'24'[/i][/green][teal]:[[[/teal][green][i]'21'[/i][/green][teal],[/teal][green][i]'Aer conditionat'[/i][/green][teal]]],[/teal]
    [green][i]'25'[/i][/green][teal]:[[[/teal][green][i]'22'[/i][/green][teal],[/teal][green][i]'Aer conditionat'[/i][/green][teal]]],[/teal]
    [green][i]'26'[/i][/green][teal]:[][/teal]
  [teal]}[/teal][teal],[/teal]
  [green][i]'marca'[/i][/green][teal]:[/teal][teal]{[/teal]
    [green][i]'next'[/i][/green][teal]:[/teal][green][i]'model'[/i][/green][teal],[/teal]
    [green][i]'18'[/i][/green][teal]:[],[/teal]
    [green][i]'17'[/i][/green][teal]:[[[/teal][green][i]'25'[/i][/green][teal],[/teal][green][i]'SIM 12-H11'[/i][/green][teal]]],[/teal]
    [green][i]'16'[/i][/green][teal]:[[[/teal][green][i]'26'[/i][/green][teal],[/teal][green][i]'VOR12 H-10'[/i][/green][teal]]],[/teal]
    [green][i]'19'[/i][/green][teal]:[],[/teal]
    [green][i]'20'[/i][/green][teal]:[],[/teal]
    [green][i]'21'[/i][/green][teal]:[[[/teal][green][i]'30'[/i][/green][teal],[/teal][green][i]'AC12'[/i][/green][teal]]],[/teal]
    [green][i]'22'[/i][/green][teal]:[],[/teal]
    [green][i]'24'[/i][/green][teal]:[],[/teal]
    [green][i]'25'[/i][/green][teal]:[][/teal]
  [teal]}[/teal]
[teal]}[/teal]

[b]function[/b] [COLOR=darkgoldenrod]changeSelect[/color][teal]([/teal]what[teal])[/teal]
[teal]{[/teal]
  [b]var[/b] name[teal]=[/teal]what[teal].[/teal]name[teal],[/teal]value[teal]=[/teal]what[teal].[/teal]options[teal][[/teal]what[teal].[/teal]selectedIndex[teal]].[/teal]value
  [b]if[/b] [teal](!([/teal]name [b]in[/b] data[teal]))[/teal] [b]return[/b]
  [b]var[/b] next[teal]=[/teal]document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal]data[teal][[/teal]name[teal]].[/teal]next[teal])[/teal]

  [b]while[/b] [teal]([/teal]next[teal].[/teal]options[teal].[/teal]length[teal]>[/teal][purple]1[/purple][teal])[/teal]
    next[teal].[/teal]options[teal][[/teal]next[teal].[/teal]options[teal].[/teal]length[teal]-[/teal][purple]1[/purple][teal]]=[/teal][b]null[/b]

  [b]if[/b] [teal]([/teal]data[teal][[/teal]name[teal]][[/teal]value[teal]])[/teal]
    [b]for[/b] [teal]([/teal][b]var[/b] i[teal]=[/teal][purple]0[/purple][teal],[/teal]l[teal]=[/teal]data[teal][[/teal]name[teal]][[/teal]value[teal]].[/teal]length[teal];[/teal]i[teal]<[/teal]l[teal];[/teal]i[teal]++)[/teal]
      next[teal].[/teal]options[teal][[/teal]next[teal].[/teal]options[teal].[/teal]length[teal]]=[/teal][b]new[/b] [COLOR=darkgoldenrod]Option[/color][teal]([/teal]data[teal][[/teal]name[teal]][[/teal]value[teal]][[/teal]i[teal]][[/teal][purple]1[/purple][teal]],[/teal]data[teal][[/teal]name[teal]][[/teal]value[teal]][[/teal]i[teal]][[/teal][purple]0[/purple][teal]])[/teal]

  next[teal].[/teal]disabled[teal]=[/teal][b]false[/b]
[teal]}[/teal]
The HTML should be modified abit :
Code: 
[b]<select[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"tip"[/i][/green] [maroon]tabindex[/maroon][teal]=[/teal][green][i]"13"[/i][/green] [maroon]size[/maroon][teal]=[/teal][green][i]"6"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"tip"[/i][/green] [maroon]onchange[/maroon][teal]=[/teal][green][i]"changeSelect(this)"[/i][/green][b]>[/b]
[gray]<!-- ... - ->[/gray]
[b]<select[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"marca"[/i][/green] [maroon]tabindex[/maroon][teal]=[/teal][green][i]"13"[/i][/green] [maroon]size[/maroon][teal]=[/teal][green][i]"6"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"marca"[/i][/green] [maroon]onchange[/maroon][teal]=[/teal][green][i]"changeSelect(this)"[/i][/green][b]>[/b]
[gray]<!-- ... - ->[/gray]
[b]<select[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"model"[/i][/green] [maroon]tabindex[/maroon][teal]=[/teal][green][i]"13"[/i][/green] [maroon]size[/maroon][teal]=[/teal][green][i]"6"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"model"[/i][/green] [maroon]onchange[/maroon][teal]=[/teal][green][i]"changeSelect(this)"[/i][/green][b]>[/b]
Note that the data object could have a more compact structure, but I tried to keep it simple.

Feherke.
 
Upvote 0 Downvote
Thank you very much feherke, I have modified the script in order to use informations from my mysql db with php and now it works perfectly!
 
Upvote 0 Downvote
Hi

[tt][blue][small][ignore][off-topic][/ignore][/small][/blue][/tt]
tbogdan said:
I have modified the script in order to use informations from my mysql db with php
Click to expand...
You mean to generate the source code for the data JavaScript object ?

I saw that many people used to generate such code by [tt]echo[/tt]ing each value separately in a loop. If that is your case too, I suggest to take a look at the [tt]json_encode()[/tt] PHP function. It is simpler and safer. There is a usage example in thread216-1593411 .
[tt][blue][small][ignore][/off-topic][/ignore][/small][/blue][/tt]

Feherke.
 
Upvote 0 Downvote
Code: 
You mean to generate the source code for the data JavaScript object ?
I saw that many people used to generate such code by echoing each value separately in a loop. If that is your case too, I suggest to take a look at the json_encode() PHP function. It is simpler and safer. There is a usage example in thread216-1593411: Fill a Text Field from a Drop-Down Box
Yes, I meaning generate source cod for the data of JavaScript obj. Thanks for suggestion, I didn't know about json_encode().

Have a nice day!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
324
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
740
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
168
Daniel K
Daniel K
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
665
ggriffit
ggriffit
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
300
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top