javascript - 下拉表单和 JavaScript

Question

我已经成功使用以下代码几年了......基本上，它允许用户从下拉列表中选择两个选项之一，并为他们提供单击按钮“A”或“B”的选项' 进行下载(两个选项的链接相同)，或在线查看选择(两个单独的链接)。

我现在需要向列表中添加第三个选项，但运气不太好？这是添加了新选项 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 添加到您的按钮中，这样我就可以识别哪个按钮执行什么操作。我还将您的选择值更改为您希望它们代表的实际值，而不是您必须更改的占位符。

为了正确起见，我还“禁用”了您的第一个选项，因此无法重新选择它，并且我删除了它的值因为它不应该有。我在表单元素中添加了一个 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)
         */
    }
});

现在我们需要做的就是查看您按下的按钮(将其与所有按钮绑定(bind)，然后读取数据操作)，然后执行您想要执行的任何内容。请注意，我使用的是行 var url = $("#myForm select").val() || false; 选择一个值或为其分配 false - 这是为了防止您的“默认”选项触发该函数(我稍后检查 url 中是否有一个值 if 语句)。