Question

我想在多个选择框中清除所选数据，但它对我不起作用。

<select  name="age" id="age" class="span2 typeahead" multiple data-rel="chosen">
    <?php
        $age_arr = explode(",", $result['age']);
        foreach ($age as $a) 
        {
            $select = "";
            for ($is = 0; $is < count($age_arr); $is++) 
            {            
                if ($age_arr[$is] == $a['age_id']) 
                {
                    $select = "selected";
                }
            } ?>
            <option id="age2" value="<?php echo $a['age_id']; ?>" <?php echo $select; ?>><?php echo $a['age']; ?></option>
            <?php
        } 
    ?>
</select>
<input type="hidden" id="age_val" name="age_val" value="<?php echo $result['age']; ?>" /> 

<input type="button" value="Clear" id="clear" class="btn" onClick="clearFields()">

这就是我的尝试：

<Script>
    function clearFields(){
        document.getElementById("age_val").value = "";
        document.getElementById("age").value = '';
    }
</Script>

请告诉我如何在点击清除按钮时清除数据，

selectbox

Answer 1

由于您有多项选择而非标准选择，因此您需要将每个selected元素的option属性设置为false。试试这个：

function clearFields() {
    $('#age option:selected').prop("selected", false);
    $('#age_val').val('');
}

Working example

Answer 2

使用Javascript：

function clearFields(){
    document.getElementById("age_val").value = "";

    var collection = document.getElementById('age').getElementsByTagName('option');

    for(var i = 0; i<collection.length; i++){
        collection[i].selected = false;
    }

    // for chosen
    $('#age').trigger('chosen:updated');
}

但只要您使用jquery，就可以使用@Rory McCrossan提供的答案中的代码并添加到函数中：$('#age').trigger('chosen:updated');

如何清除多个选择框数据

2 个答案: