根据动态下拉列表选择转到URL

Question

我目前正在尝试允许访问者从动态选择下拉框中选择2个选项。根据第二个选择，当他们点击＆＃34; Go＆＃34;按钮，他们应该被重定向到我选择的网址。每个辅助选择都将具有不同的URL。

这就是我现在所处的位置 - https://jsfiddle.net/slinger55/57uzshv8/11/

＆＃13;

＆＃13;

function configureDropDownLists(ddl1,ddl2) {
        var colours = new Array('option 1', 'option 2', 'option 3');
        var shapes = new Array('option 9', 'option 2', 'option 3');
        var names = new Array('option 4', 'option 6', 'option 7');
        var names1 = new Array('option 8', 'option 3', 'option 3');
    
        switch (ddl1.value) {
            case 'Colours':
                ddl2.options.length = 0;
                for (i = 0; i < colours.length; i++) {
                    createOption(ddl2, colours[i], colours[i]);
                }
                break;
            case 'Shapes':
                ddl2.options.length = 0; 
            for (i = 0; i < shapes.length; i++) {
                createOption(ddl2, shapes[i], shapes[i]);
                }
                break;
            case 'Names':
                ddl2.options.length = 0;
                for (i = 0; i < names.length; i++) {
                    createOption(ddl2, names[i], names[i]);
                }
                break;
               case 'Names1':
                ddl2.options.length = 0;
                for (i = 0; i < names1.length; i++) {
                    createOption(ddl2, names1[i], names1[i]);
                }
                break;
                default:
                    ddl2.options.length = 0;
                break;
        }

    }

    function createOption(ddl, text, value) {
        var opt = document.createElement('option');
        opt.value = value;
        opt.text = text;
        ddl.options.add(opt);
    }

＆＃13;

#dropdowns h3 {
    color: white;
    display: inline-block;
    padding-right: 8px;
}

select {
   color: #333333;
   opacity: .5; 
   -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;  
   -webkit-border-radius: 0;  /* Safari 3-4, iOS 1-3.2, Android 1.6- */    
   -moz-border-radius: 0;  /* Firefox 1-3.6 */     
   border-radius: 0;  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
	padding-right: 5px;
	padding-left: 5px;
    min-width: 20vw;
    min-height: 2vw;
    line-height: 40px;
}

#personal {
    display: inline-block;
    padding-right:3px;
    padding-left:3px;
}

#dropdowns {
    display: inline-block;
    position: absolute;
    left:0;
    z-index:1;
    width: 100%;
    bottom: 10%;
}

.i-am-a {
background:rgba(255,255,255,0.5);
    display: inline-block;
    font-size: 18px;
    line-height: 41.5px;
    padding-left: 5px!important;
    min-height: 4.02vh!important;
    margin-bottom: -2px!important;
    color: black!important;   
}

＆＃13;

<div id="dropdowns">
<select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
<option value="">Choose an option</option>
<option value="Colours">Test 1</option>
<option value="Shapes">Test 2</option>
<option value="Names">Test 3</option>
<option value="Names1">Test 4</option>
</select>
<div id="personal"></div>
<select id="ddl2">
<option value="">Looking to</option>
</select>


<div id="personal-nav-spacing"><a href="#"></a></div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果有人能提供帮助，我将不胜感激！这让我疯了很久。

Answer 1

对于等待感到抱歉，请参阅下面的代码/评论。我想向您展示一组进一步重构的代码，但我的回复时间比我预期的要晚得多。我会尽快尝试并尽快解决它。

如果您有任何问题，请与我们联系。

＆＃13;

＆＃13;

function configureDropDownLists(ddl1, ddl2) {
  var _config = {
    'Colours': ['option 1', 'option 2', 'option 3'],
    'Shapes': ['option 9', 'option 2', 'option 3'],
    'Names': ['option 4', 'option 6', 'option 7'],
    'Names1': ['option 8', 'option 3', 'option 3']
  }; //You had a lot of repeated instructions in your code;
  //This is JSON (JavaScript Object Notation), which you can read about at <http://www.json.org/>

  if (!_config.hasOwnProperty(ddl1.value)) return false;
  //If we don't have a property corresponding to the items in our config, stop execution.

  while (ddl2.childNodes.length > 0) {
    ddl2.removeChild(ddl2.lastChild);
    //If the second list has any children nodes, remove them.
  }

  _config[ddl1.value].forEach(function(item, i) {
    //More info about this function at
    //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
    var option = document.createElement('option');
    option.innerHTML = item;
    option.setAttribute('value', 'http://google.com/');
    ddl2.appendChild(option);
  });

}

function makeGoButton(item) {

  if (item.value == '') return false; //If the value is an empty string, stop execution
  var goButton = document.getElementById('go-button');
  //Get the goButton element

  if (!goButton) {
    //If the element doesn't exist, make it.
    goButton = document.createElement('button');
    goButton.innerHTML = "Go!";
    goButton.style.display = "inline-block";
    item.parentNode.appendChild(goButton); //add it to the parent of the item argument.
    goButton.setAttribute('onclick', 'goButtonGo()');
  } else {
    //If it does exist, make sure you can see it.
    goButton.style.display = 'inline-block';
  }
}

function goButtonGo() {
  window.location = document.getElementById('ddl2').value;
  //change the window location.
}

＆＃13;

#dropdowns h3 {
  color: white;
  display: inline-block;
  padding-right: 8px;
}
select {
  color: #333333;
  opacity: .5;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-border-radius: 0;
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -moz-border-radius: 0;
  /* Firefox 1-3.6 */
  border-radius: 0;
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  padding-right: 5px;
  padding-left: 5px;
  min-width: 20vw;
  min-height: 2vw;
  line-height: 40px;
}
#personal {
  display: inline-block;
  padding-right: 3px;
  padding-left: 3px;
}
#dropdowns {
  display: inline-block;
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100%;
  bottom: 10%;
}
.i-am-a {
  background: rgba(255, 255, 255, 0.5);
  display: inline-block;
  font-size: 18px;
  line-height: 41.5px;
  padding-left: 5px!important;
  min-height: 4.02vh!important;
  margin-bottom: -2px!important;
  color: black!important;
}

＆＃13;

<div id="dropdowns">
  <select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
    <option value="">Choose an option</option>
    <option value="Colours">Test 1</option>
    <option value="Shapes">Test 2</option>
    <option value="Names">Test 3</option>
    <option value="Names1">Test 4</option>
  </select>
  <div id="personal"></div>
  <select id="ddl2" onchange="makeGoButton(this)">
    <option value="">Looking to</option>
  </select>


  <div id="personal-nav-spacing">
    <a href="#"></a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

修改

为每个组合执行唯一网址的方法

＆＃13;

＆＃13;

function configureDropDownLists(ddl1, ddl2) {
  var _config = {
    'Colours': [{
      'name': 'option 1',
      'url': 'http://yahoo.com/'
    }, {
      'name': 'option 2',
      'url': 'http://google.com/'
    }, {
      'name': 'option 3',
      'url': 'http://gmail.com/'
    }], //End colours array
    'Shapes': [{
      'name': 'option 9',
      'url': 'http://msn.com/'
    }, {
      'name': 'option 2',
      'url': 'http://stackoverflow.com/'
    }, {
      'name': 'option 3',
      'url': 'http://facebook.com/'
    }], // End Shapes Array
    'Names': [{
      'name': 'option 4',
      'url': 'http://aol.com/'
    }, {
      'name': 'option 6',
      'url': 'http://css-tricks.com/'
    }, {
      'name': 'option 7',
      'url': 'http://wordpress.com/'
    }], //end Names array
    'Names1': [{
        'name': 'option 8',
        'url': 'http://php.com/'
      }, {
        'name': 'option 3',
        'url': 'http://phpbb.com/'
      }, {
        'name': 'option 3',
        'url': 'http://msdn.com/'
      }] // end Names1 array
  }; //You had a lot of repeated instructions in your code;
  //This is JSON (JavaScript Object Notation), which you can read about at <http://www.json.org/>

  if (!_config.hasOwnProperty(ddl1.value)) return false;
  //If we don't have a property corresponding to the items in our config, stop execution.

  while (ddl2.childNodes.length > 0) {
    ddl2.removeChild(ddl2.lastChild);
    //If the second list has any children nodes, remove them.
  }

  _config[ddl1.value].forEach(function(item, i) {
    //More info about this function at
    //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
    var option = document.createElement('option');
    option.innerHTML = item.name;
    //the item variable is now the object from the array of our selection (colours, etc.)
    //How we access the items stored in an array is by using object.keyName, in our case our two keys were 'name' and 'url', so we use item.name and item.url
    option.setAttribute('value', item.url);
    ddl2.appendChild(option);
  });

}

function makeGoButton(item) {

  if (item.value == '') return false; //If the value is an empty string, stop execution
  var goButton = document.getElementById('go-button');
  //Get the goButton element

  if (!goButton) {
    //If the element doesn't exist, make it.
    goButton = document.createElement('button');
    goButton.innerHTML = "Go!";
    goButton.style.display = "inline-block";
    item.parentNode.appendChild(goButton); //add it to the parent of the item argument.
    goButton.setAttribute('onclick', 'goButtonGo()');
    goButton.setAttribute('id', 'go-button');
  } else {
    //If it does exist, make sure you can see it.
    goButton.style.display = 'inline-block';
  }
}

function goButtonGo() {
  window.location = document.getElementById('ddl2').value;
  //change the window location.
}

＆＃13;

#dropdowns h3 {
  color: white;
  display: inline-block;
  padding-right: 8px;
}
select {
  color: #333333;
  opacity: .5;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-border-radius: 0;
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -moz-border-radius: 0;
  /* Firefox 1-3.6 */
  border-radius: 0;
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  padding-right: 5px;
  padding-left: 5px;
  min-width: 20vw;
  min-height: 2vw;
  line-height: 40px;
}
#personal {
  display: inline-block;
  padding-right: 3px;
  padding-left: 3px;
}
#dropdowns {
  display: inline-block;
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100%;
  bottom: 10%;
}
.i-am-a {
  background: rgba(255, 255, 255, 0.5);
  display: inline-block;
  font-size: 18px;
  line-height: 41.5px;
  padding-left: 5px!important;
  min-height: 4.02vh!important;
  margin-bottom: -2px!important;
  color: black!important;
}

＆＃13;

<div id="dropdowns">
  <select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
    <option value="">Choose an option</option>
    <option value="Colours">Test 1</option>
    <option value="Shapes">Test 2</option>
    <option value="Names">Test 3</option>
    <option value="Names1">Test 4</option>
  </select>
  <div id="personal"></div>
  <select id="ddl2" onchange="makeGoButton(this)">
    <option value="">Looking to</option>
  </select>


  <div id="personal-nav-spacing">
    <a href="#"></a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;