在下拉列表选择上传递单选按钮选择以查询URL中的字符串

时间:2011-12-05 17:14:22

标签: jquery

我有两列单选按钮和一个下拉列表供其他选择。这两个控件都是同一个项目的选项,例如本例中的“special”。如果选中左列或右列中的一个单选按钮,或者下拉列表选择如果下拉列表,如何从单选按钮获取所选值被选中并将该选择作为查询字符串传递给URL?因此,如果从单选按钮中选择心脏病专家,我想将其传递给网址

/search/pages/physicians.aspx?v=relevance&s=Physicians&k=Cardiologist

或者如果从下拉列表中选择了number1,则附加到URL

/search/pages/physicians.aspx?v=relevance&s=Physicians&k=number1

如何在jquery中这样做?

<div class="Specialty-Choices"><span class="Choices-Title">Choose a Specialty</span><br /><br />
 <div class="radioHolder">
    <div class="radioCol-left">
        <div class="radioRow"><input name="speciality_type" type="radio" value="Cardiologist"/> <label>Cardiologist</label> </div>
        <div class="radioRow"><input name="speciality_type" type="radio" value="Dermatologist"/> <label>Dermatologist</label> </div>
        <div class="radioRow"><input name="speciality_type" type="radio" value="Family Physician"/> <label>Family Physician</label> </div>
        <div class="radioRow"><input name="speciality_type" type="radio" value="Gastroenterologist"/> <label>Gastroenterologist</label> </div>
        <div class="radioRow"><input name="speciality_type" type="radio" value="Neurologist"/> <label>Neurologist</label> </div>
    </div>
    <div class="radioCol-right">
        <div class="radioRow"><input name="speciality_type" type="radio" value="Obstetrician"/> <label>Obstetrician</label> </div>
        <div class="radioRow"><input name="speciality_type" type="radio" value="Orthopedic Surgeon"/> <label>Orthopedic Surgeon</label> </div>
        <div class="radioRow"><input name="speciality_type" type="radio" value="Pediatrician"/> <label>Pediatrician</label> </div>
        <div class="radioRow"><input name="speciality_type" type="radio" value="Primary Care Doctor"/> <label>Primary Care Doctor</label> </div>
        <div class="radioRow"><input name="speciality_type" type="radio" value="Psychiatrist"/> <label>Psychiatrist</label> </div>
    </div>
  </div><br />
  <div class="mainPaneRow clearfix"><span class="inp"><select id="landing_physician_specialty"> <option  disabled="disabled" selected="selected">Select other specialty</option> <option>--number-1--</option> <option>--number-2--</option> <option>--number-3--</option></select> </span></div>
  <div class="mainPaneRow clearfix"><div class="submitBox"><a class="btnBlue" href="#" type="submit"><span><em class="searchElem">Search</em></span></a> <a class="paneBoxLink" href="/physicians/">Advanced Search</a> </div></div>
</div><!--END Specialty-Choices-->

1 个答案:

答案 0 :(得分:3)

获取所选的单选按钮:

var selectedDoctorType = $("input[name='speciality_type']:checked").val();

获取所选的下拉值:

var selectedNum = $("#landing_physician_specialty").val();

将它们放入网址应该只是做一些串联连接的问题

var baseUrl = "search/pages/physicians.aspx?v=relevance&";

if (selectedDoctorType)
    baseUrl += "s=" + selectedDoctorType + "&"; 
if (selectedNum)
    baseUrl += "v=" + selectedNum;

请注意,我的解决方案中潜在的尾随行为是perfectly valid