JS在选择列表中选择正确的行

Question

我正在使用这个 JS 代码来做一些魔术。完美地获取变量并删除不需要的文本并在text field中显示正确的文本。

values 2 or 3 or 5 or 7 etc. in <input type="text" id="calc_dikte[0][]" name="calc_dikte[]" value="">

function copy_dikte()
{
    var i;
    var elems = document.getElementsByName('dxf_var_dikte_copy[]');
    var elems_1 = document.getElementsByName('dxf_vars[]');
    var elems_2 = document.getElementsByName('calc_dikte[]');
    var elems_3 = document.getElementsByName('calc_ext[]');
    var l = elems.length;
    var z;
    z=0;

    for(i=0; i<l; i++)
    {
        if(elems_3[i].value == 'dxf')
        {
            elems[i].value = document.getElementById('dxf_var_dikte').value;

            var elems_1_split_1 = (elems_1[i].value).split(elems[i].value+'=');
            var elems_1_split_2 = (elems_1_split_1[1]).split(',');

            if(isNaN(elems_1_split_2[0])) { elems_2[i].value = ''; }
            else { elems_2[i].value = parseFloat(elems_1_split_2[0]); }
        }
    }
}

所以这行得通，但现在表单字段已从text 更改为select，例如：

<select id="calc_dikte[0][]" name="calc_dikte[]">
<option value="">
<option value="2|2000">2</option>
<option value="3|2000">3</option>
<option value="5|2000">5</option>
<option value="7|2000">7</option>
</select>

因此我将我的 JS 代码 (with some tips from here) 更改为：

function copy_dikte()
{
    var i;
    var elems = document.getElementsByName('dxf_var_dikte_copy[]');
    var elems_1 = document.getElementsByName('dxf_vars[]');
    var elems_2 = document.getElementsByName('calc_dikte[]');
    var elems_3 = document.getElementsByName('calc_ext[]');
    var l = elems.length;
    var z;
    z=0;

    for(i=0; i<l; i++)
    {
        if(elems_3[i].value == 'dxf')
        {
            elems[i].value = document.getElementById('dxf_var_dikte').value;

            var elems_1_split_1 = (elems_1[i].value).split(elems[i].value+'=');
            var elems_1_split_2 = (elems_1_split_1[1]).split(',');

            var sel = elems_2[i];
            var val = parseFloat(elems_1_split_2[0]);

            for(var m=0, n=sel.options.length; m<n; m++)
            {
                if(sel.options[i].innerHTML === val)
                {
                   sel.selectedIndex = m;
                   break;
                }
            }
        }
    }
}

但这不起作用，选择列表中没有选择任何项目，没有显示错误。 请帮助我更改工作代码以选择正确的行。它不应该在value 上选择，而是在>< 之间的文本中选择 选项值="5|2000">5

如果我检查

for(var m=0, n=sel.options.length; m<n; m++) {
alert('sel = '+sel.options[i].innerHTML+'\nval = '+val);
}

我看到val 是正确的。但是sel 只是$i 中使用的数字所以0 1 2

Answer 1

您正在使用strict equals 运算符将Number (parseFloat) 与.innerHTML 进行比较，.innerHTML 始终是string。

也将sel.options[i].innerHTML 转换为Number：

if (parseFloat(sel.options[i].innerHTML) === val) {
  sel.selectedIndex = m;
  break;
}

如果您想过滤掉无效号码 (NaNs)，请同时使用 !isNaN(val)。

Answer 2

实现此功能的代码：

function copy_dikte()
{
    var i;
    var elems = document.getElementsByName('dxf_var_dikte_copy[]');
    var elems_1 = document.getElementsByName('dxf_vars[]');
    var elems_2 = document.getElementsByName('calc_dikte[]');
    var elems_3 = document.getElementsByName('calc_ext[]');
    var l = elems.length;
    var z;
    z=0;

    for(i=0; i<l; i++)
    {
        if(elems_3[i].value == 'dxf')
        {
            elems[i].value = document.getElementById('dxf_var_dikte').value;

            var elems_1_split_1 = (elems_1[i].value).split(elems[i].value+'=');
            var elems_1_split_2 = (elems_1_split_1[1]).split(',');

            var val = parseFloat(elems_1_split_2[0]);
            var sel = elems_2[i];

            var opts = sel.options;

            for (var opt, j = 0; opt = opts[j]; j++)
            {
                if (opt.text == val)
                {
                    sel.selectedIndex = j;
                    break;
                }
            }
        }
    }
}