Question

我有一个带有选项的下拉框，一旦选中，将更改下一个下拉框的值。

如果我选择第一个培训选项，则两个日期都会通过表单发送到我的电子邮件地址。
但是，如果我选择社交媒体研讨会或下面的任何一个，日期将在9月2日或18日结束，这是第一个选项的值，而不是我为此特定标签设置的值。

我称之为<body onload="setup()"> Javascript：

function setup(){
   var select1 = document.getElementById('searchType');
   var selects = document.getElementsByTagName('select');

   for (i = 0; i < selects.length; i++) 
   {
       if (selects[i].id != this.id) {
           selects[i].style.display = 'none';
       }
      document.getElementById(select2).style.display = 'block';
      document.getElementById('textAreaSearchBox').style.display = 'block';
    };
}

的CSS：

#socialmedia, #advancedmarketing, #textAreaSearchBox, #firstaid {
display: none;}

HTML：

<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">

<label for="phone">What kind of training?</label>
<select id="searchType" name="training" class="fixed-size-drop">
<option value="intromarketing">Introduction to Marketing</option>
<option value="socialmedia">Social Media Workshop</option>
<option value="advancedmarketing">Advanced Marketing Workshop</option>
<option value="firstaid">First Aid Training</option></select>

<label for="date">Choose your Date:</label>
<select id="intromarketing" name="date" class="fixed-size-drop2">
<option value="2ndsept" name="2ndsept">2nd sept 2014</option>
<option value="18thsept" name="18thsept">18th sept 2014</option></select>

<select id="socialmedia" class="fixed-size-drop2">
<option value="id">11th sept 2014</option>
<option value="18thsept">18th sept 2014</option></select>

<select id="advancedmarketing" class="fixed-size-drop2">
<option value="name">9th sept 2014</option>    
<option value="organization">25th sept 2014</option></select>

<select id="firstaid" class="fixed-size-drop2">
<option value="3rdsept" name="3rdsept">3rd September 2014</option>    
<option value="16thsept" name="16thsept">16th September 2014</option></select>
<input type="submit" class="ubutton" value="submit">
</form>

以下是上传的表单：http://coffeemachines4u.co.uk/test-form.php

我一直在挠头几个小时，所以如果有人能指出我正确的方向，我会非常感激：）

Answer 1

因为你的选择框中有name-attribute。只有第一个选择具有名称日期。如果这是不可见的，它也在那里，因此表单从日期发送日期参数。您可以同时更改名称属性和选择框的可用性

使用此JavaScrip

var select1 = document.getElementById('searchType');
var selects = document.getElementsByTagName('select');

select1.onchange = function() {
var select2 = this.value.toLowerCase();
for (i = 0; i < selects.length; i++) {
    if (selects[i].id != this.id) {
        selects[i].style.display = 'none';
        selects[i].removeAttribute('name');
    }
}
document.getElementById(select2).style.display = 'block';
document.getElementById(select2).name = 'date';
document.getElementById('textAreaSearchBox').style.display = 'block';

Answer 2

使用select更新四个动态name="date"元素的名称。

在select#searchType更改时，您需要禁用/启用（DOM元素属性）相应的选择。

我的级联组合框发送错误的值

2 个答案: