Question

我是网络开发的新手，我似乎一直坚持实现以下目标：

我有一个标准的SELECT / OPTIONS表单类型（下拉列表），旁边有一些文本字段。我想根据下拉列表中的选定选项更改文本字段的格式。

原因是：我正在为JDBC创建一个简单的Web界面。部分要求是用户可以在oracle SQL后端的关系中添加元组。下拉列表允许他们选择添加元组的关系。然后，文本字段应更新以反映该关系中的名称和属性数。

我可以毫无问题地获得关系的名称和属性。我唯一的问题是动态更改HTML以使其适合所选关系。我如何使用Javascript来获得这种功能？

编辑：我没有工作版本。不过，我可以告诉你我想要的东西。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form>
            <select>
                <option>Student</option>
                <option>Instructor</option>
            </select>
            Name: <input type="text" size=10></input>
            GPA: <input type="text" size=10></input>
        </form>
    </body>
</html>

如果你选择学生，那么就会出现这样的事情

但是，如果你想添加到讲师表中，那么属性会有所不同，所以这样的东西会更合适

同样，我可以毫无问题地检索属性名称和属性数量。我不能做的是动态更改HTML以反映这些变化。

Answer 1

由于我们正在动态更改select标记的内容，因此使用jQuery是个好主意。

$("select").on("change", function() {
        $(this).nextAll("input, label").remove();
        if ($(this).prop("value") === "Student") {
            $(this).after("</br></br><label for='name'>Name: </label>" +
                           "<input type='text' size='10'/>" +
                           "<label for='gpa'>GPA: </label>" +
                           "<input type='text' size='10'/>");
        }
       else {
            $(this).after("</br></br><label for='name'>Name: </label>" +
                           "<input type='text' size='10' />" +
                           "<label for='rank'>Rank: </label>" +
                           "<input type='text' size='10' />" +
                           "<label for='department'>Department: </label>" +
                           "<input type='text' size='10' />");
             }
    });

input {
    margin-right: 10px;
}

label {
    font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>
    <option>Student</option>
    <option>Instructor</option>
</select>

您可以侦听所选选项中的更改。然后，您必须删除以前应用的标签和存在的输入元素。我们使用nextAll函数来搜索兄弟姐妹。

我们可以使用prop方法找到选择的选项。然后我们有两个选项的条件。

要插入html，我们使用after函数。

小提琴

Answer 2

根据你选择的值的值或文本，用js / Jquery做一个简单的show hide逻辑。如果仍然遇到麻烦，请将其放在评论中，我将给出一个示例/演示

<select name="" id="user" onchange="newform()">
    <option value="student" selected>student</option>
    <option value="teacher">teacher</option>
</select>

<div id="student" >
    <label for="name">Name</label><input type="text" id="name"/>
    <label for="gpa">GPA</label><input type="text" id="gpa"/>
</div>
<div id="teacher" style="visibility:hidden">
    <label for="name">Name</label><input type="text" id="name"/>
    <label for="rank">rank</label><input type="text" id="rank"/>
    <label for="dept">dept</label><input type="text" id="dept"/>
</div>
<script type="text/javascript">
function newform()
{
    var x = document.getElementById("user").value;
    if(x=="student")
    {
        document.getElementById("student").style.visibility = "visible";
        document.getElementById("teacher").style.visibility = "hidden";
    }
    else
    {
        document.getElementById("teacher").style.visibility = "visible";
        document.getElementById("student").style.visibility = "hidden";
    }
}
</script>

Answer 3

我的建议是在change元素上附加<select>事件的事件监听器。该函数将查看<select>元素的当前值，并显示/隐藏所需表单的各个部分。我在下面使用简单/普通的JavaScript提供了一个小型的工作演示。

＆＃13;

function toggle(ev) {
  // get the input elements, and convert the results into an array
  var inputs = Array.prototype.slice.call(document.querySelectorAll('input'));
  
  // clear values from all inputs
  // (that way the user doesn't accidentally enter a value, switch options, and upload unwanted data)
  inputs.forEach(input => input.value = '');

  // hide/display fields depending on which option is selected
  // #name is always displayed
  switch (ev.target.value) {
    case 'Student':
      document.querySelector('#rank').style.display = 'none';
      document.querySelector('#dept').style.display = 'none';
      document.querySelector('#gpa').style.display = 'block'; // or flex, or inline, etc. depending on your CSS
      break;
    case 'Instructor':
      document.querySelector('#rank').style.display = 'block';
      document.querySelector('#dept').style.display = 'block';
      document.querySelector('#gpa').style.display = 'none';
      break;
  }
}

document.querySelector('select').addEventListener('change', toggle);

＆＃13;

<form>

<select>
  <option selected>Student</option>
  <option>Instructor</option>
</select>

<label id=name>
  <p>Name</p>
  <input type=text>
</label>

<label id=rank style='display: none;'>
  <p>Rank</p>
  <input type=text>
</label>

<label id=dept style='display: none;'>
  <p>Department</p>
  <input type=text>
</label>

<label id=gpa>
  <p>GPA</p>
  <input type=number max=5.0 min=0.0>
</label>

<button type=submit>Submit</button>

</form>

＆＃13;

Answer 4

单击表单上的提交按钮后如何发布表单数据

 
      $(".MyToggle").click(function() {
    $(this).val()=='yes'?$(this).closest('div').find('.Questions').show():$(this).closest('div').find('.Questions').hide();
});

$("select").on("change", function() {
        $(this).nextAll("input, label").remove();
        if ($(this).prop("value") === "newzealand") {
            $(this).after("</br></br><label for='name'>Name: </label>" +
                           "<input type='text' class='form-control' size='10'/>" +
                           "<label for='gpa'>GPA: </label>" +
                           "<input type='text' class='form-control' size='10'/>");
        }
       else if ($(this).prop("value") === "australia") {
           $(this).after("</br></br><label for='name'>Name: </label>" +
                           "<input type='text' class='form-control' size='10'/>" +
                           "<label for='gpa'>GPA: </label>" +
                           "<input type='text' class='form-control' size='10'/>");
          
          
             }
             
             
              else if ($(this).prop("value") === "Newzealand-Resident") {
            $(this).after("</br></br><label for='name'>Name: </label>" +
                           "<input type='text' class='form-control' size='10'/>" +
                           "<label for='gpa'>GPA: </label>" +
                           "<input type='text' class='form-control' size='10'/>");
          
          
          
             }
             
             
             else if ($(this).prop("value") === "Newzealand-Resident") {
            $(this).after("</br></br><label for='name'>Name: </label>" +
                           "<input type='text' class='form-control' size='10'/>" +
                           "<label for='gpa'>GPA: </label>" +
                           "<input type='text' class='form-control' size='10'/>");
          
          
          
             }  
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='control-group'>
    <label class='control-label' for='work_visa'>Type of Work Visa<span class="required">*</span></label>
    <div class='controls'>
         <select name="work_visa" required="required" id="work_visa"  class="input-medium">
            <option value='' selected="selected">Choose</option>
<option value='newzealand'>New Zealand Citizen</option>
<option value='australia'>Australian Citizen</option>
<option value='Newzealand-Resident'>NZ Resident</option>
<option value='Work Visa'>Work Visa</option>
<option value='Work Permit'>Work Permit</option>
<option value='Work and Holiday Visa'>Work and Holiday Visa</option>
<option value='Student Work Visa'>Student Work Visa</option>

        </select>
        
    </div>
</div>

根据SELECT更改HTML

4 个答案: