下拉表单 & Javascript

Question

几年来我一直在成功使用以下代码...基本上，它允许用户select下拉列表中的两个选项之一，并让他们可以选择单击任一按钮'A' 或 'B' 要么下载（link 对于两个选项是相同的），要么在线查看 selection（两个单独的 links）。

我现在需要在列表中添加第三个选项，但运气不好？这是添加了新选项 3 的原始代码，javascript 我一直保持原始代码，因为到目前为止我尝试过的方法不起作用。

 <form>
  <select class="target">
   <option value="selected" selected="selected">Please choose...</option>
   <option value="option1" value="option3">OPTION 1</option>
   <option value="option2" value="option4">OPTION 2</option>
   <option value="option5" value="option6">OPTION 3</option>
  </select>  
<button type="button" class="button" id='button1'>BUTTON 1</button>
<button type="button" class="button" id='button2'>BUTTON 2</button>
</form>

<script>
var onSubmit1 = function()
{
 window.location = "http://www.link1.com/";
};

var onSubmit2 = function()
{
 window.location = "http://www.link2.com/";
};
var onSubmit3 = function()
{
 window.location = "https://www.link1.com/";
};

var onSubmit4 = function()
{
 window.location = "https://www.link3.com/";;
};

$('.target').change(function(e) {    
 var dropdown = $('.target');
 var text = $( ".target option:selected" ).text();    

 var $button1= $('#button1');
 $button1.unbind('click');

 if(text == "OPTION 1"){
   $button1.click(onSubmit1);
  return;
 }

   $button1.click(onSubmit2);      
});

$('.target').change(function(e) {    
 var dropdown = $('.target');
 var text = $( ".target option:selected" ).text();    

 var $button2= $('#button2');
 $button2.unbind('click');

 if(text == "OPTION 1"){
   $button2.click(onSubmit3);
  return;
 }

   $button2.click(onSubmit4);      
});
</script>

有没有人有任何想法...上面的代码是否完全可行？

Answer 1

正如人们所提到的，您大量过度使用了这段代码并使其过于复杂。如果你这样尝试就很简单了：

<form id="myForm">
    <select>
        <option selected disabled>Please choose...</option>
        <option value="http://www.link1.com">OPTION 1</option>
        <option value="http://www.link2.com">OPTION 2</option>
        <option value="http://www.link3.com">OPTION 3</option>
    </select>  
    <button type="button" data-action="follow">GO TO URL</button>
    <button type="button" data-action="download">DOWNLOAD</button>
</form>

请注意，我已将 data-action 添加到您的按钮中，因此我可以识别哪个按钮执行什么操作。我还将 select 的值更改为您希望它们代表的实际值，而不是您必须更改的占位符。

为了正确起见，我还'disabled'你的第一个选项，所以它不能被重新select编辑，我已经删除了它的值不应该有。我在表单元素中添加了一个 id，因为它允许我在没有太多类的情况下完成所有操作，并且我删除了所有你的类。我也省略了 ="selected"，因为你不需要它（除非你使用 XSL 转换，这只是......模糊。）

$("#myForm button").click(function(event){
    event.preventDefault();
    var url = $("#myForm select").val() || false;
    var action = $(this).data("action");
    if(action === "follow" && url){
        /* Follow the link */
        window.location.href = url;
        /* While testing, you could use alert instead of window.location.href
         * as such:
         * alert(action + " " + url)
         */
    } else if(action === "download" && url){
        /* Do the download thing, since I don't know how 
           you're doing that, heres a fictional one: */
        window.location.href = "http://www.link.com/download.php?url=" + url;
        /* While testing, you could use alert instead of window.location.href
         * as such:
         * alert(action + " " + url)
         */
    }
});

现在我们需要做的就是查看您按下的是哪个按钮（将其绑定到所有按钮，然后读取 data-action），然后执行您想执行的任何操作。请注意，我正在使用行 var url = $("#myForm select").val() || false; 到 select 一个值或分配它 false - 这是为了防止您的 'default' 选项触发该功能（我稍后检查如果 url 在 if 语句中有值）。

下拉表单 & Javascript

Dropdown Form & Javascript

html

javascript

form-submit

onsubmit

window.location