Дисплей динамической формы jQuery при выборе опции

Question

Я использую следующую функцию jQuery для отображения определенной формы при выборе значения в поле выбора.

<script> 
$("#selectCategory").on("change", function() { 
    $("#" + $(this).val()).show(); 
}) 
</script> 

Значение параметра выбора соответствует идентификатору формы. Проблема, с которой я сталкиваюсь, заключается в том, что при первом событии обмена, код работает хорошо. Но при последующих событиях обмена новая форма добавляется к существующей форме. Например, если я выбираю опцию #xyz, тогда отображается форма #xyz. Но теперь, если я изменю свой вариант выбора на #abc, форма #abc добавляется в форму #xyz.

Если пользователь меняет свой выбор, оригинальная форма должна быть удалена, а затем должна быть отображена новая форма. Например, если я выбрал опцию #abc после выбора опции #xyz, форма #xyz должна быть удалена, а форма #abc должна отображаться на своем месте.

<select id="selectCategory" name="category" style="width:100%;" tabindex="1"> 
     <option value=""></option> 
     <option value="book">Textbooks/Course Material</option> 
     <option value="compexam">Entrance Exam Books</option> 
</select> 

<form class="upload" id="book" onsubmit="return checkUpload();" action="" method="POST" enctype="multipart/form-data" style="display:none"> 
<form class="upload" id="compexam" onsubmit="return checkUpload();" action="" method="POST" enctype="multipart/form-data" style="display:none" > 

Надеюсь, это было понятно!

Answer 1

Попробуйте это:

<script> 
$("#selectCategory").on("change", function() { 
    $("form").hide(); 
    $("#" + $(this).val()).show(); 
}) 
</script> 

Прежде всего, необходимо, чтобы скрыть форму и показать форму, которую вы хотите.

В вашем случае вы показываете только формы, каждый раз, когда одна форма будет отображаться и будет добавляться вместе с другими.

Answer 2

Вы должны скрыть другие формы затем ...

<script> 
$("#selectCategory").on("change", function() { 
    $("form").hide(); //Hide all forms first 
    $("#" + $(this).val()).show(); //Show only what you want 
}) 
</script> 

Надеется, что это помогает ...

Answer 3

Решения

Вы можете скрыть все другие формы первыми затем показать только конкретную целевую форму после события следующего вида:

<script type="text/javascript"> 
    $("#selectCategory").on("change", function() { 
     $("form").hide(); 
     $("#" + $(this).val()).show(); 
    }); 
</script> 

Answer 4

Взгляните на этом решении:

https://jsfiddle.net/g2cdygd0/

JS:

$("#selectCategory").on("change", function() { 
    $('.formShownBySelect').hide(); 
    $("#" + $(this).val()).show(); 
}); 

HTML:

<select id="selectCategory"> 
    <option value="xyz">XYZ</option> 
    <option value="abc">ABC</option> 
</select> 

<form id="xyz" class="formShownBySelect"> 
    <label>I'm form XYZ</label> 
</form> 

<form id="abc" class="formShownBySelect"> 
    <label>I'm form ABC</label> 
</form> 

CSS:

#xyz, #abc { 
    display: none; 
} 

Надеется, что это помогает!

Answer 5

$("#selectCategory").on("change", function() { 
 
    $(".showable").hide(); 
 
    $("#" + $(this).val()).show(); 
 
})

div { 
 
    width: 40px; 
 
    height: 40px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="showable" id="div1" style="background-color: #f00; display: none;"></div> 
 
<div class="showable" id="div2" style="background-color: #0f0; display: none;"></div> 
 
<div class="showable" id="div3" style="background-color: #00f; display: none;"></div> 
 
<br> 
 
<select id="selectCategory"> 
 
    <option value="">-- please choose --</option> 
 
    <option value="div1">Red</option> 
 
    <option value="div2">Green</option> 
 
    <option value="div3">Blue</option> 
 
</select>