javascript - 根据动态下拉选择转到 URL

Question

我目前正在尝试让访问者从动态选择下拉框中选择 2 个选项。根据第二个选择，当他们单击“开始”按钮时，他们应该被重定向到我选择的 url。每个二次选择将有不同的 URL，它将访问。

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

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);
    }

#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;   
}

<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>

如果有人能提供帮助，我们将不胜感激!多年来，这一直让我发疯。

Answer 1

抱歉久等了，请看下面的代码/评论。我想向您展示一组进一步重构的代码，但我回来的时间比我预期的要晚得多。我会尽量在明天尽快处理它。

如果您有任何问题，请告诉我。

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.
}

#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;
}

<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>

编辑

一种为每个组合创建唯一 URL 的方法

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.
}

#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;
}

<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>