Question

我试图在选择一个选项时显示每个表单，但我甚至无法提醒每个选项x的ID ...

    <select id="contactOptions" class="pad10 col100 mart25" name="level">
        <option class="" selected disabled>About</option>
        <option data-option="option01" class="" value="1">Form01</option>
        <option data-option="option02" class="" value="2">Form02</option>
        <option data-option="option03" class="" value="3">Form03</option>
        <option data-option="option04" class="" value="4">Form04</option>
    </select>

<form action="#" method="POST" id="option01">
</form>

<form action="#" method="POST" id="option02">
</form>

<form action="#" method="POST" id="option03">
</form>

<form action="#" method="POST" id="option04">
</form>

我正在尝试定位父级并提醒ID，但它只会提醒父级ID？任何人都可以帮助我只在option01,02,03,04上做一个点击事件？不是默认选项而只是四个选项？

var contactOptions = document.querySelector("#contactOptions");
contactOptions.addEventListener("click", doSomethings, false);

function doSomethings(e){
    alert(e.target.id);
}

相关链接，但内联js

link01

Answer 1

使用change事件获得更可靠的行为
使用e.target.selectedIndex
使用data-获取.dataset.option媒体资源（要访问的媒体是＆＃34;选项＆＃34;因为＆＃34;数据 - ＆＃34;内部修剪）
创建新功能以隐藏所有表单，然后根据id的所选选项显示包含select的表单
- 为了隐藏我使用.querySelectorAll .forEach的所有表单，display方法允许我轻松地遍历元素
这里我使用CSS默认隐藏所有表单，然后使用内联样式显示一个，你可以创建一个更改var contactOptions = document.querySelector("#contactOptions"); contactOptions.addEventListener("change", doSomethings, false); function doSomethings(e) { var selectedIndex = e.target.selectedIndex; var selectedFormId = e.target.options[selectedIndex].dataset.option; showSelectedForm(selectedFormId) } function showSelectedForm(id) { // hide other forms document.querySelectorAll('form').forEach(function(element) { element.style.display = 'none'; }); var formToShow = document.querySelector('form#' + id); // show the selected form formToShow.style.display = 'block'; }属性的CSS类，然后用JavaScript切换它

＆＃13;

form {
  display: none;
}

＆＃13;

<select id="contactOptions" class="pad10 col100 mart25" name="level">
    <option class="" selected disabled>About</option>
    <option data-option="option01" class="" value="1">Form01</option>
    <option data-option="option02" class="" value="2">Form02</option>
    <option data-option="option03" class="" value="3">Form03</option>
    <option data-option="option04" class="" value="4">Form04</option>
</select>

<form action="#" method="POST" id="option01">
  form option01
</form>

<form action="#" method="POST" id="option02">
  form option02
</form>

<form action="#" method="POST" id="option03">
  form option03
</form>

<form action="#" method="POST" id="option04">
  form option04
</form>

＆＃13;

<?php
/*
Plugin Name: Remove product-category slug
Plugin URI: https://timersys.com/
Description: Check if url slug matches a woocommerce product category and use it instead
Version: 0.1
Author: Timersys
License: GPLv2 or later
*/
add_filter('request', function( $vars ) {
    global $wpdb;
    if( ! empty( $vars['pagename'] ) || ! empty( $vars['category_name'] ) || ! empty( $vars['name'] ) || ! empty( $vars['attachment'] ) ) {
        $slug = ! empty( $vars['pagename'] ) ? $vars['pagename'] : ( ! empty( $vars['name'] ) ? $vars['name'] : ( !empty( $vars['category_name'] ) ? $vars['category_name'] : $vars['attachment'] ) );
        $exists = $wpdb->get_var( $wpdb->prepare( "SELECT t.term_id FROM $wpdb->terms t LEFT JOIN $wpdb->term_taxonomy tt ON tt.term_id = t.term_id WHERE tt.taxonomy = 'product_cat' AND t.slug = %s" ,array( $slug )));
        if( $exists ){
            $old_vars = $vars;
            $vars = array('product_cat' => $slug );
            if ( !empty( $old_vars['paged'] ) || !empty( $old_vars['page'] ) )
                $vars['paged'] = ! empty( $old_vars['paged'] ) ? $old_vars['paged'] : $old_vars['page'];
            if ( !empty( $old_vars['orderby'] ) )
                    $vars['orderby'] = $old_vars['orderby'];
                if ( !empty( $old_vars['order'] ) )
                    $vars['order'] = $old_vars['order'];    
        }
    }
    return $vars;
});`

＆＃13;

Answer 2

onchange选项调用一个隐藏并显示正确形式的函数。

function showForm() {
    var option = document.getElementById('contactOptions').value;
    switch (option) {
        case '1':
            displayForm('option01');
            break;
        case '2':
            displayForm('option02');
            break;
        case '3':
            displayForm('option03');
            break;
        case '4':
            displayForm('option04');
    }
}

function displayForm(id) {
    var formsCollection = document.getElementsByTagName("form");
    for (var i = 0; i < formsCollection.length; i++) {
        if (formsCollection[i].id != id) {
            formsCollection[i].style.display = 'none';
        }else {
            formsCollection[i].style.display = 'block';
        }
    }
}

form {
        display: none;
}

<select id="contactOptions" onchange="showForm()" class="pad10 col100 mart25" name="level">
    <option class="" selected disabled>About</option>
    <option data-option="option01" class="" value="1">Form01</option>
    <option data-option="option02" class="" value="2">Form02</option>
    <option data-option="option03" class="" value="3">Form03</option>
    <option data-option="option04" class="" value="4">Form04</option>
</select>

<form action="#" method="POST" id="option01">
    <input value="form 1" type="text">
</form>

<form action="#" method="POST" id="option02">
    <input value="form 2" type="text">
</form>

<form action="#" method="POST" id="option03">
    <input value="form 3" type="text">
</form>

<form action="#" method="POST" id="option04">
    <input value="form 4" type="text">
</form>

Answer 3

加载html时，调用函数隐藏页面中的所有表单。例如，我使用了onload=hideAllForm();
从下拉列表中选择获取data-option属性值。
按用户选择的ID显示表单。

<script>
function hideAllForm(){
var formLength = document.getElementsByTagName('form').length;
for(var i=0;i<formLength;i++){
    document.getElementsByTagName('form')[i].style.display="none";
  }
}


function _check(){
    var formLength = document.getElementsByTagName('form').length;
    var e = document.getElementById("contactOptions");
    var id = e.options[e.selectedIndex].getAttribute('data-option');
	for(var i=0;i<formLength;i++){
	    document.getElementsByTagName('form')[i].style.display="none";
	}
	document.getElementById(id).style.display="block";
 }
</script>

<body onload="hideAllForm();">

<select id="contactOptions" class="pad10 col100 mart25" onchange="_check();" name="level">
        <option class="" selected disabled>About</option>
        <option data-option="option01" class="" value="1">Form01</option>
        <option data-option="option02" class="" value="2">Form02</option>
        <option data-option="option03" class="" value="3">Form03</option>
        <option data-option="option04" class="" value="4">Form04</option>
    </select>

<form action="#" method="POST" id="option01">
form01
</form>

<form action="#" method="POST" id="option02">
form02
</form>

<form action="#" method="POST" id="option03">
form03
</form>

<form action="#" method="POST" id="option04">
form04
</form>
</body>

在不同的选项上获得不同的形式

3 个答案: