如何使用jquery删除输入和下拉值

时间:2013-04-29 00:57:39

标签: jquery

我想用jquery从输入和下拉列表中删除值。

例如,如果您选择学生单选按钮,我想从name = child_email的输入中删除一个值。如果您选择“教师”单选按钮,我想从输入中删除一个值,其中name = parent_email1,parent_email2并清空下拉列表中的值,其中name = advisor。

// radiobox 
echo '<fieldset data-role="controlgroup" data-mini="true">
        <input type="radio" name="parent_or_student" id="radio-mini-1" value="student" />
        <label for="radio-mini-1">Student</label>
        <input type="radio" name="parent_or_student" id="radio-mini-2" value="parent"  />
        <label for="radio-mini-2">Parent</label>
        </fieldset>';
...
echo '<div id="student" class="desc">';
// parent_email1
echo '<div data-role="fieldcontain">'."\n";
echo "<label for='parent_email1'>Parent Email 1</label>"."\n";
    $parent_email1= array(
    'id'=>'parent_email1',
    'name'=>'parent_email1',
    'placeholder'=>'Parent email 1',
    'value'=>set_value('parent_email1'),
    );
echo form_input($parent_email1)."\n";
echo "</div>\n\n";

// parent_email2
echo '<div data-role="fieldcontain">'."\n";
echo "<label for='parent_email2'>Parent Email 2 (optional)</label>"."\n";
    $parent_email2= array(
    'id'=>'parent_email2',
    'name'=>'parent_email2',
    'placeholder'=>'Parent email 2(optional)',
    'value'=>set_value('parent_email2'),
    );
echo form_input($parent_email2)."\n";
echo "</div>\n\n";

// advisor
echo '<div data-role="fieldcontain">'."\n";
echo '<label for="advisor">Advisor</label>'."\n";
echo form_dropdown('advisor', $advisors, set_value('advisor'), 'id="advisor" data-native-menu="false" data-theme="c"')."<br />\n";
echo "</div>\n\n";

echo '</div>';
// end of student

// for parent
echo '<div id="parent" class="desc">';
// parent_email1
echo '<div data-role="fieldcontain">'."\n";
echo "<label for='child_email'>Child's School Email</label>"."\n";
    $child_email= array(
    'id'=>'child_email',
    'name'=>'child_email',
    'placeholder'=>'Child\'s School Email',
    'value'=>set_value('child_email'),
    );
echo form_input($child_email)."\n";
echo "</div>\n\n";
echo "</div>";
// end of parent

我制作的jquery如下,但不会删除值。

$(document).ready(function(){ 
$("input[name$='parent_or_student']").change(function() {
    var role = $(this).val();
    var parent_email1 = $("input[name=parent_email1]").val();
    var parent_email2 = $("input[name=parent_email2]").val();
    var child_email = $("input[name=child_email]").val();

    // remove other value
    if(role =='parent')
    {
        $(parent_email1, parent_email2).remove();   
    }
    else if(role=='student' )
    {
        $(child_email).remove();

    }
    $("div.desc").hide();
    $("#"+role).show();

}); 

提前致谢。

1 个答案:

答案 0 :(得分:2)

.remove用于删除元素而不是值。检查documentation。您需要在此处将值设置为空白。查看fiddle

var parent_email1 = $("input[name=parent_email1]");
var parent_email2 = $("input[name=parent_email2]");
var child_email = $("input[name=child_email]");

// remove other value
if(role =='parent')
{
    parent_email1.val('');   
    parent_email2.val('');   
}
else if(role=='student' )
{
    child_email.val('');   

}