Question

我正在努力完成这个

当用户点击Ballasted Roof Mount链接时，会出现一个下拉菜单，他们点击REQUEST A QUOTE并将它们带到REQUEST A QUOTE PAGE。

我想要它，以便当用户点击BALLASTED ROOF MOUNT上的报价链接请求时，PRODUCT TYPE下的select标签会更改为BALLASTED ROOF MOUNTING但是对于每个页面，它会自动默认为第一个选项，即ROOF MOUNT。

我可以通过传入参数来使用jQuery吗？

继承我的主要导航代码

     #ir_main_nav_container
  %ul#ir_main_nav
    %li
      = link_to 'Roof Mount', '/products/roofmounting/overview'
      %span.carrot
      %ul#rm_sub_menu
        %li= link_to 'Overview', '/products/roofmounting/overview'
        %li= link_to '360 View', '/products/roofmounting/360view'
        %li= link_to 'Tech Specs', '/products/roofmounting/techspecs'
        %li= link_to 'Support', '/products/roofmounting/systemsupport'
        %li.configure_btn= link_to raw("#{config_icon} Configure"), '/rm'
        %li.quote_btn= link_to raw("#{config_quote} Get a Quote"), '/support/requestaquote'
    %li
      = link_to 'Ballasted Roof Mount', '/products/ballastedroofmounting/overview'
      %span.carrot
      %ul#brm_sub_menu
        %li= link_to 'Overview', '/products/ballastedroofmounting/overview'
        %li= link_to '360 View', '/products/ballastedroofmounting/360view'
        %li= link_to 'Tech Specs', '/products/ballastedroofmounting/techspecs'
        %li= link_to 'Support', '/products/ballastedroofmounting/systemsupport'
        %li.configure_btn= link_to raw("#{config_icon} Configure"), '/brm'
        %li.quote_btn= link_to raw("#{config_quote} Get a Quote"), '/support/requestaquote'
    %li
      = link_to 'Ground Mount', '/products/groundmounting/overview'
      %span.carrot
      %ul#gm_sub_menu
        %li= link_to 'Overview', '/products/groundmounting/overview'
        %li= link_to '360 View', '/products/groundmounting/360view'
        %li= link_to 'Tech Specs', '/products/groundmounting/techspecs'
        %li= link_to 'Support', '/products/groundmounting/systemsupport'
        %li.configure_btn= link_to raw("#{config_icon} Configure"), '/sga'
        %li.quote_btn= link_to raw("#{config_quote} Get a Quote"), '/support/requestaquote'
    %li
      = link_to 'Pole Mount', '/products/polemounting/overview'
      %span.carrot
      %ul#pm_sub_menu
        %li= link_to 'Overview', '/products/polemounting/overview'
        %li= link_to '360 View', '/products/polemounting/360view'
        %li= link_to 'Tech Specs', '/products/polemounting/techspecs'
        %li= link_to 'Support', '/products/polemounting/systemsupport'
        %li.configure_btn= link_to raw("#{config_icon} Configure"), '/pm'
        %li.quote_btn= link_to raw("#{config_quote} Get a Quote"), '/support/requestaquote'

请求引用页面的代码

  <!-- container starts here -->
   <div id="container">

<br/>
<h1>GET A QUOTE</h1>
<div class="clear">&nbsp;</div>
<form action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" name="form1" id="form1" method="POST" target="_parent">

<input type=hidden name="oid" value="00DU0000000I430">

<input type=hidden name="retURL" value="http://www.ironridge.com">


<div class="clear"></div>
<div id="footer_form" style="float:left">

<label>Product Type</label>
<select  id="00NU0000001hkz3" name="00NU0000001hkz3"  class="txt_field" title="Application Type"><option value="Roof Mount">Roof Mount</option>

<option value="Ballasted Roof Mount">Ballasted Roof Mount</option>

<option value="Ground Mount">Ground Mount</option>

<option value="Pole Mount">Pole Mount</option>

</select> <br/> <br/>

我正在使用HAML和HTML 提前感谢您的意见

这是一个链接到我正在谈论的图像的链接，也许它会有所帮助 http://cmclove.org/Google%20Chrome1.png

Answer 1

我能想到的最简单的方法是一个非常基本的查询字符串实现。因此，在页面A上，当用户单击指向quotePage.html的链接时，将它们发送到quotePage.html？prod = BRM。然后，在quotePage.html上，运行以下行：

$(document).ready(function(){
if(document.URL.indexOf("prod=BRM") !== -1){//if our url has our passed value
$('#00NU0000001hkz3 option:eq("Ballasted Roof Mount")').attr('selected', 'selected');
}
else
{
$('#00NU0000001hkz3 option:eq("Pole Mount")').attr('selected', 'selected');
}
});

（代码未经测试，但有一般逻辑）

Answer 2

好吧，看起来我在原来的答案中误解了你想要的东西。你的jsfiddle的更正： http://jsfiddle.net/SxFtX/

HTML：

<a class="menuLink" href="">Menu 1</a>
<a class="menuLink" href="">Menu 2</a>
<a class="menuLink" href="">Menu 3</a>
<a class="menuLink" href="">Menu 4</a>

<select id="dd2" name="type1">
   <option value="1">Menu 1</option>
   <option value="2">Menu 2</option>
   <option value="2">Menu 3</option>
   <option value="2">Menu 4</option>
</select>

JS：

$('.menuLink').click(function() {
    var that = this;
    $('#dd2 option').each(function() {
        if (this.innerHTML === that.innerHTML) {
            $(this).attr('selected', 'selected')
        }
    });
});

当用户使用jQuery单击主导航时，选择标记以更改所选选项

2 个答案: