CF7下拉列表上的OnChange事件[选择]

时间：2018-07-27 07:45:05

标签： wordpress

我正在尝试为我的wordpress网站设置从属日期下拉列表。 我已经使用Jquery为HTML网站准备了代码。它可以正常工作并提供理想的输出，但是我不知道如何在Wordpress中实现相同的功能。

由于我是Wordpress的新手，所以无法在CF7中找到自定义项。

请帮助，如果有人知道，以下是我的HTML代码：

<!DOCTYPE html PUBLIC > 
  <head> 
    <meta http-equiv="content-type" content="text/xhtml; charset=utf-8" /> 
    <title>Time Dependent Dropdowns</title> 
</head>
<body>
 <select id="arrival-time-list" onchange="ChangeSecondList(this.options[this.selectedIndex].value)" name="arrival">
<option value="">Select arrival time</option>
<option value="8:00am">8:00am</option>
<option value="8:15am">8:15am</option>
<option value="8:30am">8:30am</option>
<option value="8:45am">8:45am</option>
<option value="9:00am">9:00am</option>
<option value="9:15am">9:15am</option>
<option value="9:30am">9:30am</option>
<option value="9:45am">9:45am</option>
<option value="10:00am">10:00am</option>
<option value="10:15am">10:15am</option>
<option value="10:30am">10:30am</option>
<option value="10:45am">10:45am</option>
<option value="11:00am">11:00am</option>
<option value="11:15am">11:15am</option>
<option value="11:30am">11:30am</option>
<option value="11:45am">11:45am</option>
<option value="12:00pm">12:00pm</option>
<option value="12:15pm">12:15pm</option>
<option value="12:30pm">12:30pm</option>
<option value="12:45pm">12:45pm</option>
<option value="1:00pm">1:00pm</option>
<option value="1:15pm">1:15pm</option>
<option value="1:30pm">1:30pm</option>
<option value="1:45pm">1:45pm</option>
<option value="2:00am">2:00am</option>
<option value="2:15am">2:15am</option>
<option value="2:30pm">2:30pm</option>
<option value="2:45pm">2:45pm</option>
<option value="3:00pm">3:00pm</option>
<option value="3:15pm">3:15pm</option>
<option value="3:30pm">3:30pm</option>
<option value="3:45pm">3:45pm</option>
<option value="4:00pm">4:00pm</option>
<option value="4:15pm">4:15pm</option>
<option value="4:30pm">4:30pm</option>
<option value="4:45pm">4:45pm</option>
<option value="5:00pm">5:00pm</option>
<option value="5:15pm">5:15pm</option>
<option value="5:30pm">5:30pm</option>
<option value="5:45pm">5:45pm</option>
<option value="6:00pm">6:00pm</option>
<option value="6:15pm">6:15pm</option>
<option value="6:30pm">6:30pm</option>
<option value="6:45pm">6:45pm</option>
<option value="7:00pm">7:00pm</option>
</select>
<div id="static-list-div" style="display:block;">
<select>
<option>&#8679; Select an arrival time</option>
<option value="">Select arrival time</option>
<option value="8:00am">8:00am</option>
<option value="8:15am">8:15am</option>
<option value="8:30am">8:30am</option>
<option value="8:45am">8:45am</option>
<option value="9:00am">9:00am</option>
<option value="9:15am">9:15am</option>
<option value="9:30am">9:30am</option>
<option value="9:45am">9:45am</option>
<option value="10:00am">10:00am</option>
<option value="10:15am">10:15am</option>
<option value="10:30am">10:30am</option>
<option value="10:45am">10:45am</option>
<option value="11:00am">11:00am</option>
<option value="11:15am">11:15am</option>
<option value="11:30am">11:30am</option>
<option value="11:45am">11:45am</option>
<option value="12:00pm">12:00pm</option>
<option value="12:15pm">12:15pm</option>
<option value="12:30pm">12:30pm</option>
<option value="12:45pm">12:45pm</option>
<option value="1:00pm">1:00pm</option>
<option value="1:15pm">1:15pm</option>
<option value="1:30pm">1:30pm</option>
<option value="1:45pm">1:45pm</option>
<option value="2:00am">2:00am</option>
<option value="2:15am">2:15am</option>
<option value="2:30pm">2:30pm</option>
<option value="2:45pm">2:45pm</option>
<option value="3:00pm">3:00pm</option>
<option value="3:15pm">3:15pm</option>
<option value="3:30pm">3:30pm</option>
<option value="3:45pm">3:45pm</option>
<option value="4:00pm">4:00pm</option>
<option value="4:15pm">4:15pm</option>
<option value="4:30pm">4:30pm</option>
<option value="4:45pm">4:45pm</option>
<option value="5:00pm">5:00pm</option>
<option value="5:15pm">5:15pm</option>
<option value="5:30pm">5:30pm</option>
<option value="5:45pm">5:45pm</option>
<option value="6:00pm">6:00pm</option>
<option value="6:15pm">6:15pm</option>
<option value="6:30pm">6:30pm</option>
<option value="6:45pm">6:45pm</option>
<option value="7:00pm">7:00pm</option>
<option>&#8679; from the above dropdown.</option>
</select>
</div>

<div id="dynamic-list-div" style="display:none;">
<select id="dynamic-list" name="serving">
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</div>
</body>
<script type="text/javascript">
function ChangeSecondList(value)
{
   if( value.length )
   {
      document.getElementById("static-list-div").style.display = "none";
      document.getElementById("dynamic-list-div").style.display = "block";
      var dropid = document.getElementById("dynamic-list");
      var ta = value.split(":");
      var hour = parseInt(ta[0]);
      var minute = parseInt(ta[1].replace(/\D/g,""));
      var apm = ta[1].replace(/\d/g,"");
      for( var i=0; i<3; i++ )
      {
         hour += 2;
         if( minute > 59 )
         {
            hour++;
            minute -= 60;
            if( hour > 11 )
            {
               apm = apm.replace(/a/,'p');
               apm = apm.replace(/A/,'P');
            }
         }
         if( hour > 12 ) { hour -= 12; }
         if( minute < 10 ) { minute = "0"+minute; }
         var valuetext = hour + ":" + minute + apm;
         dropid.options[i].text = valuetext;
         dropid.options[i].value = valuetext;
         minute = parseInt(minute);
      }
      dropid.options[0].selected = true;
   }
   else
   {
      document.getElementById("static-list-div").style.display = "block";
      document.getElementById("dynamic-list-div").style.display = "none";
   }
}

ChangeSecondList(document.getElementById("arrival-time-list").options[document.getElementById("arrival-time-list").selectedIndex].value);
</script>
 </html>

1 个答案:

答案 0 :(得分：0)

希望这会对您有所帮助-如果您了解的话，可以为此+1。 我不知道您的脚本，而此代码只是使用CF7生成的。

＃首先将函数添加到function.php文件中。

您可以使用自定义html数据创建自定义标签，并将其用作cf7这样的简码/标签。

// create a custom clock tag for cf7.
add_action( 'wpcf7_init', 'your_custom_cf_code' );
function your_custom_cf_code() {

wpcf7_add_form_tag( 'clock', 'your_custom_cf_data' ); // this is your custom callback function

 // "clock" is the type of the form-tag 
 }

//这是带有自定义html的回调函数

function your_custom_cf_data(){
echo '<select id="arrival-time-list" onchange="ChangeSecondList(this.options[this.selectedIndex].value)" name="arrival">
<option value="">Select arrival time</option>
<option value="8:00am">8:00am</option>
<option value="8:15am">8:15am</option>
<option value="8:30am">8:30am</option>
<option value="8:45am">8:45am</option>
<option value="9:00am">9:00am</option>
<option value="9:15am">9:15am</option>
<option value="9:30am">9:30am</option>
<option value="9:45am">9:45am</option>
<option value="10:00am">10:00am</option>
<option value="10:15am">10:15am</option>
<option value="10:30am">10:30am</option>
<option value="10:45am">10:45am</option>
<option value="11:00am">11:00am</option>
<option value="11:15am">11:15am</option>
<option value="11:30am">11:30am</option>
<option value="11:45am">11:45am</option>
<option value="12:00pm">12:00pm</option>
<option value="12:15pm">12:15pm</option>
<option value="12:30pm">12:30pm</option>
<option value="12:45pm">12:45pm</option>
<option value="1:00pm">1:00pm</option>
<option value="1:15pm">1:15pm</option>
<option value="1:30pm">1:30pm</option>
<option value="1:45pm">1:45pm</option>
<option value="2:00am">2:00am</option>
<option value="2:15am">2:15am</option>
<option value="2:30pm">2:30pm</option>
<option value="2:45pm">2:45pm</option>
<option value="3:00pm">3:00pm</option>
<option value="3:15pm">3:15pm</option>
<option value="3:30pm">3:30pm</option>
<option value="3:45pm">3:45pm</option>
<option value="4:00pm">4:00pm</option>
<option value="4:15pm">4:15pm</option>
<option value="4:30pm">4:30pm</option>
<option value="4:45pm">4:45pm</option>
<option value="5:00pm">5:00pm</option>
<option value="5:15pm">5:15pm</option>
<option value="5:30pm">5:30pm</option>
<option value="5:45pm">5:45pm</option>
<option value="6:00pm">6:00pm</option>
<option value="6:15pm">6:15pm</option>
<option value="6:30pm">6:30pm</option>
<option value="6:45pm">6:45pm</option>
<option value="7:00pm">7:00pm</option>
</select>
<div id="static-list-div" style="display:block;">
<select>
<option>&#8679; Select an arrival time</option>
<option value="">Select arrival time</option>
<option value="8:00am">8:00am</option>
<option value="8:15am">8:15am</option>
<option value="8:30am">8:30am</option>
<option value="8:45am">8:45am</option>
<option value="9:00am">9:00am</option>
<option value="9:15am">9:15am</option>
<option value="9:30am">9:30am</option>
<option value="9:45am">9:45am</option>
<option value="10:00am">10:00am</option>
<option value="10:15am">10:15am</option>
<option value="10:30am">10:30am</option>
<option value="10:45am">10:45am</option>
<option value="11:00am">11:00am</option>
<option value="11:15am">11:15am</option>
<option value="11:30am">11:30am</option>
<option value="11:45am">11:45am</option>
<option value="12:00pm">12:00pm</option>
<option value="12:15pm">12:15pm</option>
<option value="12:30pm">12:30pm</option>
<option value="12:45pm">12:45pm</option>
<option value="1:00pm">1:00pm</option>
<option value="1:15pm">1:15pm</option>
<option value="1:30pm">1:30pm</option>
<option value="1:45pm">1:45pm</option>
<option value="2:00am">2:00am</option>
<option value="2:15am">2:15am</option>
<option value="2:30pm">2:30pm</option>
<option value="2:45pm">2:45pm</option>
<option value="3:00pm">3:00pm</option>
<option value="3:15pm">3:15pm</option>
<option value="3:30pm">3:30pm</option>
<option value="3:45pm">3:45pm</option>
<option value="4:00pm">4:00pm</option>
<option value="4:15pm">4:15pm</option>
<option value="4:30pm">4:30pm</option>
<option value="4:45pm">4:45pm</option>
<option value="5:00pm">5:00pm</option>
<option value="5:15pm">5:15pm</option>
<option value="5:30pm">5:30pm</option>
<option value="5:45pm">5:45pm</option>
<option value="6:00pm">6:00pm</option>
<option value="6:15pm">6:15pm</option>
<option value="6:30pm">6:30pm</option>
<option value="6:45pm">6:45pm</option>
<option value="7:00pm">7:00pm</option>
<option>&#8679; from the above dropdown.</option>
</select>
</div>

<div id="dynamic-list-div" style="display:none;">
<select id="dynamic-list" name="serving">
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</div>';
}

//这是您的自定义脚本

 add_action( 'wp_footer', 'mycustom_wp_footer' );
function mycustom_wp_footer() {
?>
 <script type="text/javascript">
function ChangeSecondList(value)
{
   if( value.length )
   {
      document.getElementById("static-list-div").style.display = "none";
      document.getElementById("dynamic-list-div").style.display = "block";
      var dropid = document.getElementById("dynamic-list");
      var ta = value.split(":");
      var hour = parseInt(ta[0]);
      var minute = parseInt(ta[1].replace(/\D/g,""));
      var apm = ta[1].replace(/\d/g,"");
      for( var i=0; i<3; i++ )
      {
         hour += 2;
         if( minute > 59 )
         {
            hour++;
            minute -= 60;
            if( hour > 11 )
            {
               apm = apm.replace(/a/,'p');
               apm = apm.replace(/A/,'P');
            }
         }
         if( hour > 12 ) { hour -= 12; }
         if( minute < 10 ) { minute = "0"+minute; }
         var valuetext = hour + ":" + minute + apm;
         dropid.options[i].text = valuetext;
         dropid.options[i].value = valuetext;
         minute = parseInt(minute);
      }
      dropid.options[0].selected = true;
   }
   else
   {
      document.getElementById("static-list-div").style.display = "block";
      document.getElementById("dynamic-list-div").style.display = "none";
   }
}

ChangeSecondList(document.getElementById("arrival-time-list").options[document.getElementById("arrival-time-list").selectedIndex].value);
</script>
<?php ?>

//之后，将您的自定义[clock]标签放入联系表单7

[clock]标签插入CF7

就是这样。

相关问题
最新问题