将单选按钮选择或下拉选择传递给 URL 中的查询字符串答案

【问题标题】：Pass radiobutton selection or dropdown selection to querystring in URL将单选按钮选择或下拉选择传递给 URL 中的查询字符串
【发布时间】：2011-12-05 17:14:21
【问题描述】：

我有两列单选按钮和一个用于额外选择的下拉菜单。在此示例中，这两个控件都是同一项目的选择，例如“专业”。如果选择了左列或右列中的单选按钮之一，我如何从单选按钮中获取选定的值，或者如果下拉列表中的下拉选项，我如何从单选按钮中获取选定的值被选中并将该选择作为查询字符串传递给 URL??因此，如果从单选按钮中选择了心脏病专家，我想将其传递给 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-->

【问题讨论】：

标签： jquery

【解决方案1】：

获取选中的单选按钮：

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

获取选中的下拉值：

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

将它们放入一个 url 应该只是做一些字符串连接的问题

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

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

请注意，我的解决方案中可能尾随的 amersand 是 perfectly valid

【讨论】：