Question

我想让提交按钮对表单中两个不同的下拉菜单中的组合值进行操作。

例如......西方和冬季是西方和夏季的不同网址

我已经花了好几天才能完成这项工作。我觉得这一定有可能。请帮忙！

这是我使用的代码。当我将值替换为URL时。该URL将在提交（go）时加载。我希望计算第一个下拉列表和第二个下拉列表的值，结果应该是提交时的URL。最后应该有16个不同的URL。

$(document).ready(function () {
$(".go-btn").click(function () {
location = $("#selection option:selected").val();
});
});

<div class="selCont">
<h2>pick an option</h2>

<select id="selection" name="selection">
<option value="1">West</option>
<option value="2">East</option>
<option value="3">North</option>
<option value="4">South</option>
</select>

<select id="selection" name="selection">
<option value="1">Winter</option>
<option value="2">Spring</option>
<option value="3">Summer</option>
<option value="4">Fall</option>

</select>
<button class="go-btn" type="submit">Go</button>
</div>

Answer 1

试试这段代码：

jQuery( document ).ready(function( $ ) {
    $( ".go-btn" ).click(function() {
        // Grab text from select boxes
        var firstSelection = $( "#selection1 option:selected" ).text();
        var secondSelection = $( "#selection2 option:selected" ).text();

        // Set URL, change as necessary
        var url = "http://www.example.com/" + firstSelection + "/" + secondSelection;

        // Redirect
        window.location.href = url;
    });
});

另外，更改选择框上的ID：

<select id="selection1">
    <option value="1">Hands</option>
    <option value="2">Feet</option>
    <option value="3">Body</option>
</select>
<select id="selection2">
    <option value="1">Acne</option>
    <option value="2">Dry Skin</option>
    <option value="3">Redness</option>
    <option value="4">Sensitivity</option>
</select>

谢谢，

安德鲁

Answer 2

尝试为两个选择器元素提供唯一ID。这是一个工作片段：

(function () {
  
  $(".go-btn").on(
    'click', 
     function (e) {
       // within this function you should figure out the url
       // to redirect to, depending on the selected values
       // the next line only shows the text of selected values
       $('#selected').html([$('#select1 option:selected').text(), 
                            $('#select2 option:selected').text()].join('/'));
  });
  
}());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="selCont">
  
  <h2>pick an option</h2>

  <select id="select1">
    <option value="1" selected>West</option>
    <option value="2">East</option>
    <option value="3">North</option>
    <option value="4">South</option>
  </select>

  <select id="select2">
    <option value="1" selected>Winter</option>
    <option value="2">Spring</option>
    <option value="3">Summer</option>
    <option value="4">Fall</option>
  </select>

  <button class="go-btn" type="submit">Go</button>
  
</div>
<div id="selected"></div>

Answer 3

所以我现在需要做的是例如：如果用户选择：

我是：＆＃34;有人用我的双手工作＆＃34; 我需要：＆＃34;紫外线防护＆＃34;

一旦他们点击Go，就会看到他们：http://glysomed.bydecosta.com/portfolio-item/hand-cream-frag-free/

或

如果用户点击：我是：＆＃34;和我一起工作的人＃34; 我需要：＆＃34; Acne＆＃34;

一旦他们点击Go，就会看到他们：http://glysomed.bydecosta.com/portfolio-item/foot-balm/

＆＃13;

jQuery( document ).ready(function( $ ) {
    $( ".go-btn" ).click(function() {
        // Grab text from select boxes
        var firstSelection = $( "#selection1 option:selected" ).text();
        var secondSelection = $( "#selection2 option:selected" ).text();

        // Set URL, change as necessary
        var url = "http://www.example.com/" + firstSelection + "/" + secondSelection;

        // Redirect
        window.location.href = url;
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="selCont">
  
  <h2>Me Time</h2>

I Am:
  <select id="select1">
  	<option value=" " selected="selected">- Select -</option>
    <option value="1">Someone who works with my hands</option>
    <option value="2">Someone who works wit my feet</option>
    <option value="3">Someone who works with my body</option>
  </select>

and I need:
  <select id="select2">
    <option value=" " selected="selected">- Select -</option>
    <option value="1">UV Protection</option>
    <option value="2">Acne</option>
    <option value="3">Dry Skin</option>
    <option value="4">Eczema</option>
    <option value="5">Itchy Relief</option>
    <option value="6">Redness</option>
    <option value="7">Sensitive Skin</option>
  </select>

  <button class="go-btn" type="submit">Go</button>
  
</div>
<div id="selected"></div>

＆＃13;

如何使用提交按钮组合值添加多个下拉表单并转到url

3 个答案: