Dúvida em dropdownlist Javascript, adicionar links

Lit

Lit

Power Member
Boas, tenho este código e não estou a conseguir adicionar links a esta lista de modo a que abra uma outra página.

Aqui está o link do código:

http://www.coursesweb.net/javascript/multiple-select-dropdown-list-javascript_t

é o Double Select Dropdown List e a parte onde quero adicionar links para abrir e não apenas mostrar texto é aqui:



SList.scontent = {
"ajax": 'www.marplo.net/ajax/', <---- AQUI MOSTRA APENAS TEXTO E EU QUERO MESMO ABRIR O LINK
"games": 'www.marplo.net/jocuri/',
"anime": 'www.marplo.net/anime/',
"php-mysql": 'www.coursesweb.net/php-mysql/',
"javascript": 'www.coursesweb.net/javascript/',
"flash-as3": 'www.coursesweb.net/flash/' };


Agradeço desde já a quem me ajudar, tenho mesmo urgência nisto.

Obrigado.
 
Portanto, segundo o que entendo tu queres abrir a página correspondente ao que tens na dropdown
Código: 
<select name="slist1" onchange="openLink(this.value);"> <option value="">- - -</option>
 <option value="ajax">Ajax</option>
 <option value="games">Games</option>
 <option value="[COLOR=#EDEDED]anime[/COLOR]">Anime</option>
</select>

//JAVASCRIPT
[COLOR=#EDEDED]var [/COLOR]listcontent[COLOR=#EDEDED]= { [/COLOR]
[COLOR=#EDEDED]"ajax": 'www.marplo.net/ajax/',[/COLOR]
[COLOR=#EDEDED]"games": 'www.marplo.net/jocuri/', [/COLOR]
[COLOR=#EDEDED]"anime": 'www.marplo.net/anime/', [/COLOR]
[COLOR=#EDEDED]"php-mysql": 'www.coursesweb.net/php-mysql/', [/COLOR]
[COLOR=#EDEDED]"javascript": 'www.coursesweb.net/javascript/', [/COLOR]
[COLOR=#EDEDED]"flash-as3": 'www.coursesweb.net/flash/' };
[/COLOR]
function openLink(value){
if(value != ""){
window.location = listcontent[value];
}
}

Vê se assim te resolve.
 
Pr00f disse:
Portanto, segundo o que entendo tu queres abrir a página correspondente ao que tens na dropdown
Código: 
<select name="slist1" onchange="openLink(this.value);"> <option value="">- - -</option>
 <option value="ajax">Ajax</option>
 <option value="games">Games</option>
 <option value="[COLOR=#EDEDED]anime[/COLOR]">Anime</option>
</select>

//JAVASCRIPT
[COLOR=#EDEDED]var [/COLOR]listcontent[COLOR=#EDEDED]= { [/COLOR]
[COLOR=#EDEDED]"ajax": 'www.marplo.net/ajax/',[/COLOR]
[COLOR=#EDEDED]"games": 'www.marplo.net/jocuri/', [/COLOR]
[COLOR=#EDEDED]"anime": 'www.marplo.net/anime/', [/COLOR]
[COLOR=#EDEDED]"php-mysql": 'www.coursesweb.net/php-mysql/', [/COLOR]
[COLOR=#EDEDED]"javascript": 'www.coursesweb.net/javascript/', [/COLOR]
[COLOR=#EDEDED]"flash-as3": 'www.coursesweb.net/flash/' };
[/COLOR]
function openLink(value){
if(value != ""){
window.location = listcontent[value];
}
}

Vê se assim te resolve.
Clicar para expandir...

Obrigado desde já, foste o único que me respondeu, mas não consegui ver a tua sugestão a funcionar, experimentaste antes essa sugestão para ver se funcionava ou nem por isso? É que experimentei colocar isso num ficheiro html e não funciona, dá erros.

Podes me explicar melhor como faço ?

Obrigado
 
não sei se irá a tempo...

Código: 
<!-- The first select list -->Select WebSite: <select name="slist1" onchange="SList.getSelect('slist2', this.value);">
 <option>- - -</option>
 <option value="marplo">MarPlo.net</option>
 <option value="coursesweb">CoursesWeb.net</option>
</select>
<!-- Tags for the seccond dropdown list, and for text-content -->
<span id="slist2"></span> <div id="scontent"></div>


<script><!--
/* Script Double Select Dropdown List, from: coursesweb.net/javascript/ */
var SList = new Object();             // JS object that stores data for options


// HERE replace the value with the text you want to be displayed near Select
var txtsl2 = 'Select Category:';


/*
 Property with options for the Seccond select list
 The key in this object must be the same with the values of the options added in the first select
 The values in the array associated to each key represent options of the seccond select
*/
SList.slist2 = {
 "marplo": ['ajax', 'games', 'anime'],
 "coursesweb": ['php-mysql', 'javascript', 'flash-as3']
};


/*
 Property with text-content associated with the options of the 2nd select list
 The key in this object must be the same with the values (options) added in each Array in "slist2" above
 The values of each key represent the content displayed after the user selects an option in 2nd dropdown list
*/
SList.scontent = {
 "ajax": 'http://www.marplo.net/ajax/',
 "games": 'http://www.marplo.net/jocuri/',
 "anime": 'http://www.marplo.net/anime/',
 "php-mysql": 'http://coursesweb.net/php-mysql/',
 "javascript": 'http://coursesweb.net/javascript/',
 "flash-as3": 'coursesweb.net/flash/'
};


    /* From here no need to modify */


// function to get the dropdown list, or content
SList.getSelect = function(slist, option) {
  document.getElementById('scontent').innerHTML = '';           // empty option-content


  if(SList[slist][option]) {
    // if option from the last Select, add text-content, else, set dropdown list
    if(slist == 'scontent') {
         //document.getElementById('scontent').innerHTML = SList[slist][option];
        window.open(SList[slist][option]);
    }
    else if(slist == 'slist2') {
      var addata = '<option>- - -</option>';
      for(var i=0; i<SList[slist][option].length; i++) {
        addata += '<option value="'+SList[slist][option][i]+'">'+SList[slist][option][i]+'</option>';
      }


      document.getElementById('slist2').innerHTML = txtsl2+' <select name="slist2" onchange="SList.getSelect(\'scontent\', this.value);">'+addata+'</select>';
    }
  }
  else if(slist == 'slist2') {
    // empty the tag for 2nd select list
    document.getElementById('slist2').innerHTML = '';
  }
}
--></script>


preview & edit
 
Última edição:
31fevereiro disse:
não sei se irá a tempo...

Código: 
<!-- The first select list -->Select WebSite: <select name="slist1" onchange="SList.getSelect('slist2', this.value);">
 <option>- - -</option>
 <option value="marplo">MarPlo.net</option>
 <option value="coursesweb">CoursesWeb.net</option>
</select>
<!-- Tags for the seccond dropdown list, and for text-content -->
<span id="slist2"></span> <div id="scontent"></div>


<script><!--
/* Script Double Select Dropdown List, from: coursesweb.net/javascript/ */
var SList = new Object();             // JS object that stores data for options


// HERE replace the value with the text you want to be displayed near Select
var txtsl2 = 'Select Category:';


/*
 Property with options for the Seccond select list
 The key in this object must be the same with the values of the options added in the first select
 The values in the array associated to each key represent options of the seccond select
*/
SList.slist2 = {
 "marplo": ['ajax', 'games', 'anime'],
 "coursesweb": ['php-mysql', 'javascript', 'flash-as3']
};


/*
 Property with text-content associated with the options of the 2nd select list
 The key in this object must be the same with the values (options) added in each Array in "slist2" above
 The values of each key represent the content displayed after the user selects an option in 2nd dropdown list
*/
SList.scontent = {
 "ajax": 'http://www.marplo.net/ajax/',
 "games": 'http://www.marplo.net/jocuri/',
 "anime": 'http://www.marplo.net/anime/',
 "php-mysql": 'http://coursesweb.net/php-mysql/',
 "javascript": 'http://coursesweb.net/javascript/',
 "flash-as3": 'coursesweb.net/flash/'
};


    /* From here no need to modify */


// function to get the dropdown list, or content
SList.getSelect = function(slist, option) {
  document.getElementById('scontent').innerHTML = '';           // empty option-content


  if(SList[slist][option]) {
    // if option from the last Select, add text-content, else, set dropdown list
    if(slist == 'scontent') {
         //document.getElementById('scontent').innerHTML = SList[slist][option];
        window.open(SList[slist][option]);
    }
    else if(slist == 'slist2') {
      var addata = '<option>- - -</option>';
      for(var i=0; i<SList[slist][option].length; i++) {
        addata += '<option value="'+SList[slist][option][i]+'">'+SList[slist][option][i]+'</option>';
      }


      document.getElementById('slist2').innerHTML = txtsl2+' <select name="slist2" onchange="SList.getSelect(\'scontent\', this.value);">'+addata+'</select>';
    }
  }
  else if(slist == 'slist2') {
    // empty the tag for 2nd select list
    document.getElementById('slist2').innerHTML = '';
  }
}
--></script>


preview & edit
Clicar para expandir...


Ainda vai a tempo sim. Muito obrigado, mesmo isso que eu precisava, :):wow:.

Nem sabes a ajuda que me deste. Muito obrigado mesmo.

Um abração.
 
Inicie sessão ou registe-se para poder participar.
Back
Topo