Question

在下面的选择列表rond中选择了选项edit_type时，我需要将输入字段edit_maat_2更改为readonly，但是什么也没发生。

这是我的代码：

<select class="form-control" id="edit_type['.$i.']" name="edit_type" onclick="show_dim(this, '.$i.')">
<option ';if($row_table_1['type'] == 'rond') { echo 'selected="selected"';} echo 'value="as">Staf rond</option>
<option ';if($row_table_1['type'] == 'buis') { echo 'selected="selected"';} echo 'value="buis">Buis</option>
</select>

<input type="number" class="form-control" id="edit_maat_2['.$i.']" name="edit_maat_2" value="'.$row_table_1['maat_2'].'">

<script type="text/javascript">
function show_dim(selectVeld, nr)
{
    if(document.getElementById('edit_type['+nr+']').value == 'rond') {
        document.getElementById('edit_maat_2['+nr+']').attr('readonly','readonly'); }
}
</script>

$i生成并且功能正常。

当我检查这是控制台模式时，我看到此错误：Uncaught ReferenceError: e is not defined我没有使用变量e任何wehere（？）

有什么建议吗？

Answer 1

几个问题，很多错字。

您具有“ as”和“ buis”值-无“ rond”
.attr是jQuery，不是DOM

这可能是您想要的

function setAccess() {
  var id = this.id.replace("edit_type", "edit_maat_2"),
    field = document.getElementById(id);
  if (this.value == "as") {
    field.setAttribute('readonly', 'readonly');
  } else {
    field.removeAttribute('readonly');
  }

}

window.addEventListener("load", function() {
  document.querySelectorAll("[id^=edit_type]").forEach(function(sel) {
    sel.addEventListener("change", setAccess);
    // Initialise the fields in case of PHP setting the selected attribute
    if ("createEvent" in document) {
      var evt = document.createEvent("HTMLEvents");
      evt.initEvent("change", false, true);
      sel.dispatchEvent(evt);
    } else {
      sel.fireEvent("onchange");
    }
  });
})

<select class="form-control" id="edit_type[1]" name="edit_type">
  <option value="as">Staf rond</option>
  <option value="buis">Buis</option>
</select>

1 <input type="number" class="form-control" id="edit_maat_2[1]" name="edit_maat_2" value="1">

<select class="form-control" id="edit_type[2]" name="edit_type">
  <option value="as">Staf rond</option>
  <option value="buis">Buis</option>
</select>

2 <input type="number" class="form-control" id="edit_maat_2[2]" name="edit_maat_2" value="2">

Answer 2

很难说，但是：

"edit_type['.$i.']"

将解决类似问题

"edit_type['.1.']"

在调用函数时您会寻找

'edit_type['+nr+']'

如果nr == '.1.'变为：

'edit_type[.1.]'

请注意缺少的刻度线。也不是到处都有点。要么在函数中添加刻度线，要么完全删除刻度线和点（这将解析为没有tic的运算符）。这会增加刻度线：

function show_dim(selectVeld, nr)
{
    if(document.getElementById("edit_type['"+nr+"']").value == 'rond') {
        document.getElementById("edit_maat_2['"+nr+"']").attr('readonly','readonly'); }
}

<select class="form-control" id="edit_type['.1.']" name="edit_type" onclick="show_dim(this, '.1.')">
<option ';if($row_table_1['type'] == 'as') { echo 'selected="selected"';} echo 'value="as">Staf rond</option>
<option ';if($row_table_1['type'] == 'buis') { echo 'selected="selected"';} echo 'value="buis">Buis</option>
</select>

<input type="number" class="form-control" id="edit_maat_2['.$i.']" name="edit_maat_2" value="'.$row_table_1['maat_2'].'">

但是我想你只是想要

"edit_type[$i]"

和函数参数中

$i

而不是'.$i.'。如果您实际上是在显示最终的HTML结果，则问题是一样的，到处都是$i作为字符串而不是1。

检查选择的值并将输入字段更改为只读

2 个答案: