值不显示,即使它在HTML中

时间:2011-12-19 14:06:05

标签: javascript jquery html forms

我有一个显示的表单,并隐藏某些字段取决于某个字段具有的值,执行此操作的javascript如下所示,

jQuery(function(){

    jQuery('.voice_over, .commercial').hide();

    if(jQuery("#type option:selected").val() == "voice over")
    {
        jQuery('.voice_over, .role').fadeIn(500);
        jQuery('.generic, .fieldError, .commercial').fadeOut(500).val('');
    }

    if(jQuery("#type option:selected").val() == "television" || jQuery("#type").val() == "theatre" || jQuery("#type").val() == "radio" || jQuery("#type").val() == "film" || jQuery("#type").val() == "commercial" )
    {
        jQuery('.voice_over, .commercial').fadeOut(500).val('');
        jQuery('.generic, .role').fadeIn(500);
    }

    if(jQuery("#type option:selected").val() == "commercial") {
        jQuery('input[name="production_role"], .voice_over, .generic, .role').fadeOut(500).val('');
        jQuery('.commercial').fadeIn(500);
    }

    jQuery("#type").change(function(){ 

        if(jQuery(this).val() == "voice over")
        {
            jQuery('.generic, .commercial, .fieldError').fadeOut(500).val('');
            jQuery('.voice_over').fadeIn(500);
        }
        else if(jQuery(this).val() == "commercial") {
            jQuery('input[name="production_role"], .role, .generic, .fieldError').fadeOut(500).val('');
            jQuery('.commercial').fadeIn(500);
        }
        else if(jQuery(this).val() == "television" || jQuery(this).val() == "theatre" || jQuery(this).val() == "radio" || jQuery(this).val() == "film")
        {
            jQuery('.commercial, .fieldError, .voice_over').fadeOut(500).val('');
            jQuery('.generic, .role, input[name="production_role"]').fadeIn(500);   
        }

    });
});

我得到的HTML如下(这是通过PHP生成的),

<form action="http://urbantalent.factoryagency.co.uk/admin/candidates/add_step_3/id/177/edit" method="post" accept-charset="utf-8" class="step_3">
                <label for="type">Production Type</label>
<select name="production_type" id="type">
<option value="television">Television</option>
<option value="theatre">Theatre</option>
<option value="film">Film</option>
<option value="commercial" selected="selected">Commercial</option>
<option value="voice over">Voice Over</option>
<option value="short film">Short Film</option>

<option value="corporate">Corporate/Training</option>
<option value="radio">Radio</option>
</select>
                <label style="display: none;" class="generic">Production Title</label>
        <input style="display: none;" name="production_title" value="" class="generic" type="text">
                <label style="display: none;" class="voice_over">Project Type</label>
        <input style="display: none;" name="production_project_type" value="" class="voice_over" type="text">
                <label style="display: none;" class="voice_over">Name/Product</label>

        <input style="display: none;" name="production_product" value="" class="voice_over" type="text">
                <label style="display: none;" class="voice_over">Production Agency</label>
        <input style="display: none;" name="production_agency" value="" class="voice_over" type="text">
                <label style="display: none;" class="role">Role</label>
        <input style="display: none;" name="production_role" value="" type="text">
                <label style="display: none;" class="generic">Director</label>
        <input style="display: none;" name="production_director" value="" class="generic" type="text">

                <label style="display: none;" class="generic">Production Company</label>
        <input style="display: none;" name="production_company" value="" class="generic" type="text">
                <label style="display: block;" class="commercial">Commercial Details</label>
        <input style="display: inline;" name="production_details" value="Walking down the street looking happy - Daz (2010)" class="commercial" type="text">
                <input name="career_overview_id" value="177" type="hidden">
                <input name="candidate_id" value="" type="hidden">
                <input name="form_step" value="3" type="hidden">
                    <input name="step_3" value="Save" type="submit">

            </form>

正如您所看到的,production_details字段有一个值,但我在字段中看不到任何内容。

当我删除javascript时,我看到值很好,所以我只能假设那里有错误,但是我看不到它。

1 个答案:

答案 0 :(得分:2)

if(jQuery("#type option:selected").val() == "television" || jQuery("#type").val() == "theatre" || jQuery("#type").val() == "radio" || jQuery("#type").val() == "film" || jQuery("#type").val() == "commercial" )
    {
        jQuery('.voice_over, .commercial').fadeOut(500).val('');
        jQuery('.generic, .role').fadeIn(500);
    }

您将val设置为空字符串。

重要的部分是:

if(... jQuery("#type").val() == "commercial"){
    jQuery('..., .commercial')...val('');
}