在运行时修改 innerhtml 属性答案

【问题标题】：Modifying innerhtml properties at runtime在运行时修改 innerhtml 属性
【发布时间】：2016-05-06 07:41:02
【问题描述】：

我有一个包含两个值和一个文本框的下拉列表。我想要的是—— - 如果我选择选项1，文本框应该是最多可以输入10个字符 - 如果我选择选项 2，文本框的最大长度应该没有限制

我不知道怎么做。可能是通过修改innerhtml但不知道如何进行！下面是我的下拉列表和文本框的 .jsp 文件代码，它现在显示最大长度为 10 的文本框，我需要将其动态化。

<select name="filetype" id="3">
     <option value="null">--</option>
     <option value="CTN" >CTN</option>
     <option value="SLID" >SLID</option>
</select>

<h2>Enter the number<font color="red">*</font></h2>
        <input type="text" name="customerID" maxlength=10 size="50" id="4"/> 
        <input type="submit" value="Submit Data" />

【问题讨论】：

标签： javascript jquery html innerhtml

【解决方案1】：

既然你用jquery 标记了这个问题，那么你就是一个简单的例子：

 $('input[name="customerID"]').attr('maxlength')

这是一个吸气剂。要设置一个值，您必须编写第二个参数。整个例子应该是：

$(document).ready(function() {

  $('select[name="filetype"]').on('change', function(e) {
    var val = $(this).val();
    if(val === "CTN") {
      $('input[name="customerID"]').attr('maxlength', 10); //maxlength =10
    } else if(val === "SLID") {
      $('input[name="customerID"]').removeAttr('maxlength'); //no maxlength
    }
  });
});

【讨论】：

【解决方案2】：

将onchange 事件写入select，如下所示。获取selected value 并根据条件在textbox 中添加或删除maxlength 属性

$("select[name=filetype]").on('change', function() {
  var val = $(this).find('option:selected').val();
  $('input[name="customerID"]').val('');
  if (val == "CTN")
    $('input[name="customerID"]').attr('maxlength', 10);
  else if (val == "SLID")
    $('input[name="customerID"]').removeAttr('maxlength');
  else
    return false;
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="filetype" id="3">
  <option value="null">--</option>
  <option value="CTN">CTN</option>
  <option value="SLID">SLID</option>
</select>

<h2>Enter the number<font color="red">*</font></h2>
<input type="text" name="customerID" maxlength="10" size="50" id="4" />
<input type="submit" value="Submit Data" />

【讨论】：

【解决方案3】：

试试下面的代码。

<script>
$(function () {
    $('select').change(function () {
        if ($(this).val() == "CTN") {
            $('input:first').attr('maxlength', '10')
        }
        else if ($(this).val() == "SLID") {
            $('input:first').attr('maxlength', '')
        }
    });
});
</script>
<select name="filetype" id="3">
    <option value="null">--</option>
    <option value="CTN">CTN</option>
    <option value="SLID">SLID</option>
</select>

<h2>Enter the number<font color="red">*</font></h2>
<input type="text" name="customerID" maxlength="10" size="50" id="4" />
<input type="submit" value="Submit Data" />

【讨论】：

【解决方案4】：

使用一些 JQuery 类似这样的东西可以工作：

$("h2 input").attr({maxlength: 30});

【讨论】：

错了。如果设置参数需要{}语法