Question

我通过我的functions.php中的函数在我的后端产品编辑页面中添加了一个自定义的woocommerce下拉元：

    var query2 = (
    from users in Repo.T_Benutzer
    join mappings in Repo.T_Benutzer_Benutzergruppen on mappings.BEBG_BE equals users.BE_ID into tmpMapp
    join groups in Repo.T_Benutzergruppen on groups.ID equals mappings.BEBG_BG into tmpGroups
    from mappings in tmpMapp.DefaultIfEmpty()
    from groups in tmpGroups.DefaultIfEmpty()
    select new
    {
         UserId = users.BE_ID
        ,UserName = users.BE_User
        ,UserGroupId = mappings.BEBG_BG
        ,GroupName = groups.Name
    }

);

这很好用，添加了新元并正确保存数据。

在我的产品模板页面中，我想根据下拉选项显示function woo_add_custom_general_fields() { global $woocommerce, $post; echo '<div class="options_group">'; // Select Dropdown Workshop Available woocommerce_wp_select( array( 'id' => '_wc_workshop', 'label' => __( 'Workshop Available', 'woocommerce' ), 'options' => array( 'one' => __( 'Not Available', 'woocommerce' ), 'two' => __( 'Workshop Available', 'woocommerce' ) ) ) ); echo '</div>'; } function woo_add_custom_general_fields_save( $post_id ){ // Dropdown Inspection Available - Save Data $woocommerce_select = $_POST['_wc_workshop']; if( !empty( $woocommerce_select ) ) update_post_meta( $post_id, '_wc_workshop', esc_attr( $woocommerce_select ) ); } ?>。因此，如果从下拉列表中选择选项TWO（可用工作坊），我想表明：

div

我正在尝试以下内容：

<div class="special-conditions-icons">
    <img src="http://...../icons/workshop-available.png" style="width:32px; height:32px; border:0" />   
</div>

但我只是没有使用此代码。

我试图避免使用Jquery。我只是不知道如何在模板文件中正确使用它，因为它们都以<?php $workshop_array = array( 'Workshop Available' ); $workshop_class = get_the_terms( $values['product_id'], '_wc_workshop' ); if( in_array( $workshop_class[0]->slug, $workshop_array )) { ?> <div class="special-conditions-icons"> <img src="http://...../icons/workshop-available.png" style="width:32px; height:32px; border:0" /> </div> <?php } ?>开头并且没有html标头。

Answer 1

正如其中一条评论所述，您可以在页面head或body的任意位置加载jquery，但必须在结束</body>标记之前，但使用原始JavaScript：{{3 }}，

var hiddenDiv = document.getElementById('hiddenDiv'),
    select = document.getElementById('slct');

select.addEventListener('change', function(){
	hiddenDiv.style.display = 'block';
});

#hiddenDiv{
    display:none;
}

select:
<select id="slct">
    <option></option>
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
    <option>option 4</option>
</select>
<hr>
<div id="hiddenDiv">
	I was hidden before you select from the dropdown
</div>

Answer 2

问题解决了 - 没有必要使用JQUERY或JS，但非常感谢您花时间尝试和帮助。

线条如下：

<?php 
$value = get_post_meta(get_the_ID(), '_wc_workshop', true);
            if($value == 'two') {
?>
       <div class="special-conditions-icons">
              <img src="http://...../icons/workshop-available.png" style="width:32px; height:32px; border:0" /> 
           </div>
<?php } ?>

非Jquery - 如果选择了下拉选项，则显示div

2 个答案: