组合两个下拉菜单以确定提交按钮链接

时间:2022-03-06 23:07:13

I have two dropdown menus. The first is to choose your location. The second is to choose what type of pictures you want to upload. (i.e. Option 1 - Akron, Option 2 - Skyline). I've setup a file request (DropBox generated upload link) in my DropBox account for these options (Akron, Skyline). If they choose (Akron, Houses), it'd be a different upload link. Similarly, (Cleveland, Streets) would be yet another upload link. Using JQuery, I have the link sent to my submit button HTML. Everything I've tried sends to that link no matter what options I choose. (i.e. everything goes to (Akron, Skyline) link even if I choose (Akron, Houses). There is something wrong in my if statement and I can't figure it out. Here is a sample of my code. The if statement is for the (Akron, Skyline) combination. Additional code will be written for other options once I get this one to work. I've replaced the upload link with a generic URL.

我有两个下拉菜单。首先是选择你的位置。第二种是选择要上传的图片类型。 (即选项1 - 阿克伦,选项2 - 天际线)。我在我的DropBox帐户中为这些选项设置了一个文件请求(DropBox生成的上传链接)(Akron,Skyline)。如果他们选择(Akron,Houses),它将是一个不同的上传链接。同样,(克利夫兰,街道)将是另一个上传链接。使用JQuery,我将链接发送到我的提交按钮HTML。无论我选择什么选项,我尝试过的所有内容都会发送到该链接。 (即使我选择(Akron,Houses),一切都会进入(Akron,Skyline)链接。我的if语句中有一些错误,我无法弄明白。这是我的代码示例.if语句是对于(Akron,Skyline)组合。一旦我开始使用其他选项,我们将为其他选项编写附加代码。我已经用通用URL替换了上传链接。

<!DOCTYPE html>
        <html>
        <body>
            <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
            <p> Choose Your Location </p>
            <select id="Location Select">
                <option value="Choose Location">Choose Location</option>
                <option value="Akron">Akron</option>
                <option value="Alliance">Alliance</option>
                <option value="Ashland">Ashland</option>
                <option value="Barberton">Barberton</option>
                <option value="Bellaire">Bellaire</option>
            </select>
            <br>
            <br>
            <p> What Pictures or Videos are You Uploading? </p>
            <select id="Type Select">
                <option value="Choose Type">Choose Type</option>
                <option value="Skyline">Skyline</option>
                <option value="Streets">Streets</option>
                <option value="Houses">Houses</option>
            </select>
            <br>
            <br>
            <a href='URL'>
                <input type="button" value="Upload" />
                <script>
       if("#Location Select").val("Akron") && ("#Type  Select").val("Skyline"){
       $("a").attr("href",'https://www.google.com');
     }
     </script>
        </body>
        </html>

2 个解决方案

#1


0  

This this code. It was missing $ as well as brackets.

这个代码。它缺少$和括号。

if($("#Location Select").val("Akron") && $("#Type  Select").val("Skyline")){
       $("a").attr("href",'https://www.google.com');
     }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
        <html>
        <body>
            <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
            <p> Choose Your Location </p>
            <select id="Location Select">
                <option value="Choose Location">Choose Location</option>
                <option value="Akron">Akron</option>
                <option value="Alliance">Alliance</option>
                <option value="Ashland">Ashland</option>
                <option value="Barberton">Barberton</option>
                <option value="Bellaire">Bellaire</option>
            </select>
            <br>
            <br>
            <p> What Pictures or Videos are You Uploading? </p>
            <select id="Type Select">
                <option value="Choose Type">Choose Type</option>
                <option value="Skyline">Skyline</option>
                <option value="Streets">Streets</option>
                <option value="Houses">Houses</option>
            </select>
            <br>
            <br>
            <a href='URL'>
                <input type="button" value="Upload" />

        </body>
        </html>

#2


1  

Note

注意

http://api.jquery.com/val/

http://api.jquery.com/val/

.val() does not accept any arguments.

.val()不接受任何参数。

Also note that you first have to identify the selected element, and then get its value.

另请注意,首先必须标识所选元素,然后获取其值。

HTML IDs should not have spaces, and there should only be one ID of a particular string in any given document. If you want to describe a type of element, use class instead. For example:

HTML ID不应包含空格,并且任何给定文档中只应有一个特定字符串的ID。如果要描述一种元素,请改用class。例如:

<p> Choose Your Location </p>
<select class="Select" id="Location">
  <option value="Choose Location">Choose Location</option>
  <option value="Akron">Akron</option>
  <option value="Alliance">Alliance</option>
  <option value="Ashland">Ashland</option>
  <option value="Barberton">Barberton</option>
  <option value="Bellaire">Bellaire</option>
</select>
<br>
<br>
<p> What Pictures or Videos are You Uploading? </p>
<select class="Select" id="Type">
  <option value="Choose Type">Choose Type</option>
  <option value="Skyline">Skyline</option>
  <option value="Streets">Streets</option>
  <option value="Houses">Houses</option>
</select>
<br>
<br>
<a href='URL'>
  <input type="button" value="Upload" />

<script>
$('input').click((e) => {
  e.preventDefault();
  const location = $('#Location')[0];
  const type = $('#Type')[0];
  const locationVal = location.options[location.selectedIndex].value;
  const typeVal = type.options[type.selectedIndex].value;
  if (locationVal === 'Akron' && typeVal === 'Skyline') {
    console.log('Akron/Skyline');
  } else {
    console.log(`Other, ${locationVal} ${typeVal}`);
  }
});
</script>

(you don't actually need the class="Select" here at all, based on the code so far)

(根据目前的代码,你根本不需要class =“Select”)

#1


0  

This this code. It was missing $ as well as brackets.

这个代码。它缺少$和括号。

if($("#Location Select").val("Akron") && $("#Type  Select").val("Skyline")){
       $("a").attr("href",'https://www.google.com');
     }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
        <html>
        <body>
            <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
            <p> Choose Your Location </p>
            <select id="Location Select">
                <option value="Choose Location">Choose Location</option>
                <option value="Akron">Akron</option>
                <option value="Alliance">Alliance</option>
                <option value="Ashland">Ashland</option>
                <option value="Barberton">Barberton</option>
                <option value="Bellaire">Bellaire</option>
            </select>
            <br>
            <br>
            <p> What Pictures or Videos are You Uploading? </p>
            <select id="Type Select">
                <option value="Choose Type">Choose Type</option>
                <option value="Skyline">Skyline</option>
                <option value="Streets">Streets</option>
                <option value="Houses">Houses</option>
            </select>
            <br>
            <br>
            <a href='URL'>
                <input type="button" value="Upload" />

        </body>
        </html>

#2


1  

Note

注意

http://api.jquery.com/val/

http://api.jquery.com/val/

.val() does not accept any arguments.

.val()不接受任何参数。

Also note that you first have to identify the selected element, and then get its value.

另请注意,首先必须标识所选元素,然后获取其值。

HTML IDs should not have spaces, and there should only be one ID of a particular string in any given document. If you want to describe a type of element, use class instead. For example:

HTML ID不应包含空格,并且任何给定文档中只应有一个特定字符串的ID。如果要描述一种元素,请改用class。例如:

<p> Choose Your Location </p>
<select class="Select" id="Location">
  <option value="Choose Location">Choose Location</option>
  <option value="Akron">Akron</option>
  <option value="Alliance">Alliance</option>
  <option value="Ashland">Ashland</option>
  <option value="Barberton">Barberton</option>
  <option value="Bellaire">Bellaire</option>
</select>
<br>
<br>
<p> What Pictures or Videos are You Uploading? </p>
<select class="Select" id="Type">
  <option value="Choose Type">Choose Type</option>
  <option value="Skyline">Skyline</option>
  <option value="Streets">Streets</option>
  <option value="Houses">Houses</option>
</select>
<br>
<br>
<a href='URL'>
  <input type="button" value="Upload" />

<script>
$('input').click((e) => {
  e.preventDefault();
  const location = $('#Location')[0];
  const type = $('#Type')[0];
  const locationVal = location.options[location.selectedIndex].value;
  const typeVal = type.options[type.selectedIndex].value;
  if (locationVal === 'Akron' && typeVal === 'Skyline') {
    console.log('Akron/Skyline');
  } else {
    console.log(`Other, ${locationVal} ${typeVal}`);
  }
});
</script>

(you don't actually need the class="Select" here at all, based on the code so far)

(根据目前的代码,你根本不需要class =“Select”)