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 Chriss Miller 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
Joined
Apr 13, 2010
Messages
4
Location
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 Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
1K
lexer
lexer
Mike Lewis
  • Locked
  • Question Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid)
Replies
5
Views
2K
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question Question
Javascript events
Replies
1
Views
618
Daniel K
Daniel K
Marclem
  • Locked
  • Question Question
javascript:navigator.registerProtocolHandler
Replies
1
Views
627
Marclem
Marclem
JScannell
  • Locked
  • Question Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
2K
ggriffit
ggriffit

Part and Inventory Search

Sponsor

Back
Top