Question

<td>
    <select id="sub_name_id">
        <option value="1">CHEMISTRY</option>
        <option value="2">ENGLISH</option>
        <option value="3">MATHS</option>
        <option value="4">PHYSICS</option>
        <option value="5">ADD NEW SUB</option>
    </select><input type="text" id="txt1" style="display:none;">
</td>
<td>
    <input type="text" class="obtainedmarks1" id="obtained_marks">
    <input type="text" class="totalmarks1" id="total_marks" value="100" read only>
    <input type="button" class="add_button" value="+" >
</td>

我有一系列主题的下拉列表。

当我点击+按钮时，下拉列表中的所选主题应复制到文本框中（代码中未提及）。

此外，当我选择ADD NEW SUBJECT选项时，应显示带有id="txt1"的文本框，然后点击按钮即可添加自己的主题。

同时在添加新主题时，如果已添加新主题，则应显示警告，说明主题已添加。

谢谢..

Answer 1

$('#add_button').click(function(){

var selectedText= $('#sub_name_id option[selected]').text();
if(selectedText==='ADD NEW SUB'){
  $('#txt1').show();
}
$('#targetTextBox').val(selectedText);
});

Answer 2

您可以使用以下js并在html代码中进行一些更改，如

<强> HTML

<select id="sub_name_id">
    <option value="1">CHEMISTRY</option>
    <option value="2">ENGLISH</option>
    <option value="3">MATHS</option>
    <option value="4">PHYSICS</option>
    <option value="5">ADD NEW SUB</option>
</select>    

<input type="text" class="obtainedmarks1" id="obtained_marks">
<input type="text" class="totalmarks1" id="total_marks" value="100" read only>    
    <input type="button" id="add_button" value="+">

<强> JS

var container = document.getElementById（'container'）; document.getElementById（'add_button'）。onclick = function（）{var input = document.createElement（'input'）， div = document.createElement（'div'）; input.type =“text”; div.appendChild（输入）; container.appendChild（DIV）; };

查看此Demo

从下拉列表中选择特定选项时添加文本框

2 个答案: