Question

好的，我在我的表单中有这个选择区域，还有一个名为“insert product number”的隐藏字段。我想要做的是：如果用户选择“产品”选项，隐藏字段将显示在选择字段的正下方。我怎样才能做到这一点？谢谢！

    <select>
      <option>Jobs</option>
      <option>Products</option>
      <option>Other</option>
    </select>

Answer 1

你需要检查选择框的选定值。

<select id="ddlSelect">
      <option>Jobs</option>
      <option>Products</option>
      <option>Other</option>
    </select>
<input type="text" id="hdnPro" value="product" style='display:none'/>

$('#ddlSelect').on('change',function(){
   if($(this).val() == 'Products'){
        $('#hdnPro').show();
      }else{
        $('#hdnPro').hide();
      }
});

<强> DEMO

Answer 2

var sortOrder = ['Failed', 'Aborted', 'Success']; // <--- Look here

$.post("/portal/controllers/apis/test.jag", {
    action: "getData"
}, function(data) {
    var result = JSON.parse(data);
    var Day = result[result.length - 1].Days;

    /* Look here: */
    result = result.sort(function(a, b) { 
        return sortOrder.indexOf(a.Day07) - sortOrder.indexOf(b.Day07);
    });
    /* ---------- */

    $("#tableid").append("<thead><tr><th> Product </th> <th >" + Day[0].substring(5, 11) + "</th> <th>" + Day[1].substring(5, 11) + "</th> <th>" + Day[2].substring(5, 11) + "</th><th>" + Day[3].substring(5, 11) + "</th><th>" + Day[4].substring(5, 11) + "</th><th>" + Day[5].substring(5, 11) + "</th><th> Current </th><th> Failed Components </th><th> Failed Duration </th></tr></thead>");

    for (var i = 0; i < result.length; i++) {
        $("#tableid").append("<tbody><tr><td>" + result[i].product + "</td><td><img src='images/" + result[i].Day01 + ".png' /></td><td><img src='images/" + result[i].Day02 + ".png' /><td><img src='images/" + result[i].Day03 + ".png' /></td><td><img src='images/" + result[i].Day04 + ".png' /></td><td><img src='images/" + result[i].Day05 + ".png' /></td><td><img src='images/" + result[i].Day06 + ".png' /></td><td><img src='images/" + result[i].Day07 + ".png' /></td><td>" + result[i].Failed.Component + "</td><td>" + result[i].Failed.Duration + "</td></tr></tbody>");
    }
});

注意：

  <select id="types">
  <option value="1">Jobs</option>
  <option value="2">Products</option>
  <option value="3">Other</option>
</select>

<input type="text" id="products" placeholder="Insert product number" style="display:none"/>


<script type="text/javascript">
$(document).ready(function(){

$("#types").change(function(){

  var type = $(this).val();

   if(type  == "2"){
        $("#products").show();
      }else{
        $("#products").hide();
      }
});

});

</script>

添加jquery库

表单 - 通过选择选择标记中的选项显示隐藏字段

2 个答案: