两种形式的问题选择与javascript函数冲突

Question

我有两种形式，都有选择/选项（下面的例子）。我的目的是当用户选择其中一个选项时，该值将通过函数传递并插入到超链接字符串中。第一种形式工作正常，但在做第二种形式并使用不起作用的相同功能时，似乎与第一种形式冲突。有没有一种方法可以重复使用这个函数，而不需要复制，粘贴和重命名它只是为了工作，因为这会使脚本变得很庞大？

<form> 
    <select id="event_date_01" class="add_event_url"> 
    <option value="124167826">4th Oct 2012, 2pm-3pm AEST</option> 
    <option value="398017490">4th Oct 2012, 3pm-4pm BST</option> 
    <option value="536485554">25th Oct 2012, 3pm-4pm AEDT</option> 
    <option value="708861114">25th Oct 2012, 3pm-4pm BST</option> 
    <option value="339435154">29th Oct 2012, 3pm-4pm AEDT</option> 
    <option value="">29th Oct 2012, 3pm-4pm GMT</option> 
    </select> 
</form> 
<span class="webinarLink2"> 
    <a href="" target="_blank" class="desturl webinarLink"> 
    Register now &raquo; 
    </a> 
</span> 

<form> 
<select id="event_date_02" class="add_event_url"> 
    <option value="411491250">27th Sept 2012, 2pm-3pm AEST</option> 
    <option value="175324970">27th Sept 2012, 3pm-4pm BST</option> 
</select> 
<span class="webinarLink2"><a href="" target="_blank" class="desturl webinarLink">Register now &raquo;</a></span> 
</form> 

，我使用的JavaScript低于

$(document).ready(function() { 
    if ($("select.add_event_url").length) { 
    $("select.add_event_url").change(displayVals); 
    displayVals(); 
    } 
}); 

function displayVals() { 
    var event_date = $("#event_date").val(); 
    $("a.desturl").attr('href', 'https://www2.gotomeeting.com/register/' + event_date); 
} 

在此先感谢球员

Answer 1

你似乎可以用具有相同的ID选择元素。这不行; ID必须是唯一的。

赋予这两个<select>期不同的ID，但保持相同的类，并尝试这样的事：

$(document).ready(function() { 
    $("select.add_event_url").change(function(e) { 
     var $select = $(this), 
      event_date = $select.val(), 
      baseurl = 'https://www2.gotomeeting.com/register/'; 
     $("a.desturl").attr('href', baseurl + event_date); 
    }); 
});​ 

http://jsfiddle.net/74Lfg/1/

UPDATE

为了从select穿越到正确的a.desturl，你需要把它们放在相同的相对位置，以便它们可以从this。 http://jsfiddle.net/74Lfg/4/

$(document).ready(function() { 
    $("select.add_event_url").change(function(e) { 
     var $select = $(this), 
      event_date = $select.val(), 
      baseurl = 'https://www2.gotomeeting.com/register/'; 
     $select.closest('form').find('.webinarLink2 a.desturl').attr('href', baseurl + event_date); 
    }); 
    $('select.add_event_url').trigger('change'); 
});​ 

HTML（注意第一个链接已经移到表格内）：

<form> 
    <select id="event_date_01" class="add_event_url"> 
    <option value="124167826">4th Oct 2012, 2pm-3pm AEST</option> 
    <option value="398017490">4th Oct 2012, 3pm-4pm BST</option> 
    <option value="536485554">25th Oct 2012, 3pm-4pm AEDT</option> 
    <option value="708861114">25th Oct 2012, 3pm-4pm BST</option> 
    <option value="339435154">29th Oct 2012, 3pm-4pm AEDT</option> 
    <option value="">29th Oct 2012, 3pm-4pm GMT</option> 
    </select> 
<span class="webinarLink2"> 
    <a href="" target="_blank" class="desturl webinarLink"> 
    Register now &raquo; 
    </a> 
</span> 
</form> 

<form> 
<select id="event_date_02" class="add_event_url"> 
    <option value="411491250">27th Sept 2012, 2pm-3pm AEST</option> 
    <option value="175324970">27th Sept 2012, 3pm-4pm BST</option> 
</select> 
<span class="webinarLink2"><a href="" target="_blank" class="desturl webinarLink">Register now &raquo;</a></span> 
</form>​ 

另外，您可以分配各个环节的唯一ID（这样你就可以在任何地方把它在该页面中）并将该ID添加为data-属性到select元素。 http://jsfiddle.net/74Lfg/5/

$(document).ready(function() { 
    $("select.add_event_url").change(function(e) { 
     var $select = $(this), 
      event_date = $select.val(), 
      baseurl = 'https://www2.gotomeeting.com/register/'; 
     $('#'+$select.data('targetlink')).attr('href', baseurl + event_date); 
    }); 
    $('select.add_event_url').trigger('change'); 
});​ 

HTML：

<form> 
    <select id="event_date_01" class="add_event_url" data-targetlink="targetlink1"> 
    <option value="124167826">4th Oct 2012, 2pm-3pm AEST</option> 
    <option value="398017490">4th Oct 2012, 3pm-4pm BST</option> 
    <option value="536485554">25th Oct 2012, 3pm-4pm AEDT</option> 
    <option value="708861114">25th Oct 2012, 3pm-4pm BST</option> 
    <option value="339435154">29th Oct 2012, 3pm-4pm AEDT</option> 
    <option value="">29th Oct 2012, 3pm-4pm GMT</option> 
    </select> 
<span class="webinarLink2"> 
    <a href="" target="_blank" id="targetlink1" class="desturl webinarLink"> 
    Register now &raquo; 
    </a> 
</span> 
</form> 

<form> 
<select id="event_date_02" class="add_event_url" data-targetlink="targetlink2"> 
    <option value="411491250">27th Sept 2012, 2pm-3pm AEST</option> 
    <option value="175324970">27th Sept 2012, 3pm-4pm BST</option> 
</select> 
<span class="webinarLink2"><a href="" target="_blank" class="desturl webinarLink" id="targetlink2">Register now &raquo;</a></span> 
</form>​​​​​​​​​​​​​​