javascript - 我可以使用自定义选择框来用Php处理元素的值吗？

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭 9 年前。

Improve this question

也许这是一个愚蠢的问题，但我正在努力思考正确的问题!

我做了一个自定义选择框..

HTML:

<div class="select_box">                        
<div class="select_box_header">Show User Group <span><!--SelectArrow--> </span></div>
<!--select_user-->

<div class="option_box">
    <h3>Group 1</h3>
    <input type="checkbox" name="user_group" id="UserA" value="UserA">
    <label for="UserA">User A</label>
    <input type="checkbox" name="user_group" id="UserB" value="UserB">
    <label for="UserB">User B </label>

    <h3>Group 2</h3>
    <input type="checkbox" name="user_group" id="UserC" value="UserC">
    <label for="UserC">User C</label>
    <input type="checkbox" name="user_group" id="UserD" value="UserD">
    <label for="UserD">User D </label>                              
 </div><!--option_box-->

 </div><!--select_box--> 

它可以很好地使用一些 css 和 js 在客户端进行更改。

参见:http://jsfiddle.net/jakptq60/4/

我的问题是:如何使用自定义选择框通过 Php 处理数据？就像:作为选择的选项将其发送到数据库等。这可能吗？

我尝试过类似的方法，但是没有得到回复:

<?php

    if (isset($_POST['user_group'])) {
    $user_group = $_POST['user_group'];
    echo $user_group;
    }
?>

Answer 1

我建议将其从隐藏复选框更改为单个 <input id="user_group" type="hidden" name="user_group"/>然后更新 jquery 以更新隐藏的 #user_group，然后从所有其他元素中删除 name="user_group"，因为这会混淆大多数浏览器获取最后一个值并将其传递到服务器的问题。

HTML

<div class="select_box">
    <input type="hidden" name="user_group" id="user_group"/>                            
    <div class="select_box_header">Show User Group <span> </span></div><!--select_user-->
    <div class="option_box">
        <h3>Group 1</h3>
        <div class="select_me" data-val="UserA">User A</div>
        <div class="select_me" data-val="UserB">User B </div>
        <h3>Group 2</h3>
        <div class="select_me" data-val="UserC">User C</div>
        <div class="select_me" data-val="UserD">User D </div>
    </div><!--option_box-->
 </div><!--select_box-->

JS

$('.select_box_header span').addClass('nonActiveSpan');
$('.select_box_header').click(function(){
    $('.select_box').toggleClass('activeSelect'); //Open Select Box 
    $('.select_box_header span').toggleClass('nonActiveSpan activeSpan'); // Toggle Dropdown Arrow      
});

/* Check if Custom Checkbox is being checked..*/
$('.select_me').on('click', function(){
    $('#user_group').val($(this).attr('data-val'));
    $('.select_box_header').html($('#user_group').val());
    $('.select_box').toggleClass('activeSelect'); //Open Select Box 
    $('.select_box_header span').toggleClass('nonActiveSpan activeSpan'); // Toggle Dropdown Arrow      
});

您会想要使用它，使其看起来不错，并且在选择值时不会摆脱箭头，并且能够再次选择“无值”选项。但这应该回答如何做到这一点。

在你的 PHP 脚本中你只需使用 $_REQUEST['user_group']访问您的变量。