Question

我运行一个joomla网站，并希望在执行以下操作的文章中创建一个html表单：

＆＃13;

<form action="compare.html" method="post">

<select id="select1" name="select1" required="">
  <option value="A">OptionA</option>
  <option value="B">OptionB</option>
  <option value="C">OptionC</option>
</select>

<select id="select2" name="select2" required="">
  <option value="1">Option1</option>
  <option value="2">Option2</option>
  <option value="3">Option3</option>
</select>

<input id="submit" type="submit" />
</form>

＆＃13;

从2个下拉列表中选择并提交表单后，用户应根据所选选项转到页面。 E.g。

OptionA + Option1 - ＆gt;转到page_97.html

OptionA + Option2 - ＆gt;转到page_451.html

OptionA + Option3 - ＆gt;转到page_13.html

OptionB + Option1 - ＆gt;转到page_77.html

等等。

我希望这可以用纯HTML或一些简单的JS（我是js，php的新手）来完成？

Answer 1

我提出了以下可行的解决方案，但我确信这可以进行优化。

＆＃13;

<select id="select1" name="select1" required="" oninput="join_names();">
  <option value="">=== SELECT ===</option>
  <option value="A">OptionA</option>
  <option value="B">OptionB</option>
  <option value="C">OptionC</option>
</select>
<br>
<select id="select2" name="select2" required="" oninput="join_names();">
  <option value="">=== SELECT ===</option>
  <option value="1">Option1</option>
  <option value="2">Option2</option>
  <option value="3">Option3</option>
</select>
<br>
<button id="compareButton" class="float-left submit-button">COMPARE</button>

<script type="text/javascript">

   var urlMap = {
    "default" : "/default.html",
    "A1"      : "/page_97.html",
    "A2"      : "/page_451.html",
    "A3"      : "/page_13.html"
    "A3"      : "/page_77.html"
   }

   function join_names() {
    var input_select1 = document.getElementsByName('select1')[0].value;
    var input_select2 = document.getElementsByName('select2')[0].value;
    var var_select12 = concatenate(input_select1, input_select2);
    var var_select12_url = getMapValue(urlMap,var_select12);
    document.getElementById("compareButton").onclick = function () {
       window.location.href = var_select12_url;
    };
   }

   function concatenate(string_one, string_two) {
    return string_one+string_two;
   }

   function getMapValue(obj, key) {
    if (obj.hasOwnProperty(key)) {
      return obj[key];
    } else { 
      return obj['default']; 
    }
   }
  
  </script>

＆＃13;

提交包含2个选择字段的表单以转到不同的页面

1 个答案: