jquery 如何给s赋值< select>< option>以显示以val命名的特定图像？

目前正在开发一个基于值创建序列号以显示特定图像的自动识别器。我在隐藏一些选择选项时遇到了麻烦，因为我不知道如何根据标记值/图像名称来做到这一点。
我已经知道如何隐藏/显示选项了，但我不知道如何给选项赋值。
尺寸值可以按原样翻译，但类型（斯塔尔、多边形等）应翻译为字母（F、B、A等）

let Laenge = 0;
let Teller = 0;
let KappeFarbe = 1;
let Teller2 = 0;
let GA = 0;
let GD = 0;
let VO = 0;
let VU = 0;

function dropdownTeller(element) {
  Teller = element.value;
  if (GA != 0 && GD != 0) {
    if (KappeFarbe = 1) {
      document.getElementById("image").style.backgroundImage = "url(konfig/" + Teller2 + Teller + GA + GD + VO + VU + ".png)";
    } else {
      document.getElementById("image").style.backgroundImage = "url(konfig/" + Teller2 + Teller + KappeFarbe + GA + GD + VO + VU + ".png)";
    }
  } else {
    if (KappeFarbe = 1) {
      document.getElementById("image").style.backgroundImage = "url(konfig/" + Teller2 + Teller + ".png)";
    } else {
      document.getElementById("image").style.backgroundImage = "url(konfig/" + Teller2 + Teller + KappeFarbe + ".png)";
    }
  }
}

function dropdownTeller2(element) {
  Teller2 = element.value;
  document.getElementById("durchmesser").style.visibility = "visible"
  if (GA != 0 && GD != 0) {
    if (KappeFarbe = 1) {
      document.getElementById("image").style.backgroundImage = "url(konfig/" + Teller2 + Teller + GA + GD + VO + VU + ".png)";
    } else {
      document.getElementById("image").style.backgroundImage = "url(konfig/" + Teller2 + Teller + KappeFarbe + GA + GD + VO + VU + ".png)";
    }
  } else {
    if (KappeFarbe = 1) {
      document.getElementById("image").style.backgroundImage = "url(konfig/" + Teller2 + Teller + ".png)";
    } else {
      document.getElementById("image").style.backgroundImage = "url(konfig/" + Teller2 + Teller + KappeFarbe + ".png)";
    }
    const FVal = new Array("19", "20", "30");
  }
}

/* jQuery TEST */
var subjectObject = {
  "Stahlteller": [
    "19",
    "20",
    "30",
    "33",
    "35",
    "40",
    "45",
    "50",
    "60"
  ],
  "Stahlteller abgeschnitten": [
    "40/35",
    "40/30"
  ],
  "Stahlteller abgeschnitten mit 2 Anschraublöchern": [
    "40/35",
    "40/30"
  ],
  "Stahlteller mit 2 Anschraublöchern": [
    "30",
    "40",
    "45",
    "50",
    "60"
  ],
  "Stahlteller mit 3 Anschraublöchern": [
    "45"
  ],
  "Stahlteller mit 4 Anschraublöchern": [
    "80"
  ],
  "Stahlteller gewölbt": [
    "40"
  ],
  "Edelstahlteller": [
    "25",
    "30",
    "36",
    "40",
    "50",
    "60",
    "70",
    "75"
  ],
  "Edelstahlgelenkteller": [
    "60",
    "70"
  ],
  "Edelstahlteller STABIL": [
    "50"
  ],
  "Polyamidteller": [
    "20",
    "30",
    "36",
    "48",
    "50"
  ]
}

window.onload = function() {
  var subjectSel = document.getElementById("teller2");
  var topicSel = document.getElementById("teller");

  for (var x in subjectObject) {
    subjectSel.appendChild(new Option(x, x));
  }
  subjectSel.onchange = function() { //empty Chapters- and Topics- dropdowns

    //subjectSel.length = 1;   
    topicSel.length = 1;
    //display correct values
    for (var y in subjectObject[this.value]) {
      topicSel.appendChild(new Option(subjectObject[this.value][y], y));
    }
  }

}

.buttonrow {
  display: flex;
  margin-bottom: 40px;
  margin-left: 100px;
}

.rightoption {
  margin-left: 100px;
}

.buttons {
  margin-top: 50px;
}

#test {
  width: 200px;
  height: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="buttonrow">
  <div class="Gewinde">
    <h4> Fußteller Art: </h4>
    <select name="teller2" id="teller2" onchange="dropdownTeller2(this)">
      <option value="0"></option>
    </select>
  </div>
</div>
<div class="buttonrow" id="durchmesser">
  <div class="Gewinde">
    <h4> Fußteller Größe: </h4>
    <select name="teller" id="teller" onchange="dropdownTeller(this)">
      <option value="0">Durchmesser (mm)</option>
    </select>
  </div>
</div>

好吧。在无数的头痛之后，我终于找到了一个可行的解决方案。由于第二个选择器在第一个选择器被改变之前是不可见的（我没有发布完整的代码，因为我认为这不会有帮助......我想我错了），我只是放弃了我的jQuery部分，并提出了这个：

<div class="Gewinde">
    
        <h4> Fußteller Art: </h4>
        
        <select name="teller2" id="teller2" onchange="dropdownTeller2(this)">
        
            <option value="0"></option>
            <option value="F">Stahlteller</option>
            <option value="A">Stahlteller abgeschnitten</option>
            <option value="N">Stahlteller abgeschnitten mit 2 Anschraublöchern</option>
            <option value="L">Stahlteller mit 2 Anschraublöchern</option>
            <option value="B">Stahlteller mit 3 Anschraublöchern</option>
            <option value="C">Stahlteller mit 4 Anschraublöchern</option>
            <option value="G">Stahlteller gewölbt</option>  
            <option value="T">Stahlteller sechskant</option>    
            <option value="E">Edelstahlteller</option>
            <option value="D">Edelstahlgelenkteller</option>
            <option value="STABIL">Edelstahlteller STABIL</option>
            <option value="K">Polyamidtellerteller</option>
            
        </select>
    
    </div>

    <div class="Gewinde">
    
        <h4> Fußteller Größe: </h4>
        
        <select name="teller" id="teller" onchange="dropdownTeller(this)">
         
            <option value="0">Durchmesser</option>
        </select>
                    
    </div>

字符串
JavaScript：

document.getElementById('teller2').addEventListener('change', function() {
    var teller = document.getElementById('teller');
    var teller2Value = this.value;

    // Clear all options
    teller.innerHTML = '';

    if (teller2Value === 'A' || teller2Value === 'N') {
        teller.add(new Option('Durchmesser', '0'));
        teller.add(new Option('40/35', '1'));
        teller.add(new Option('40/30', '2'));
    } else if (teller2Value === 'C') {
        teller.add(new Option('Durchmesser', '0'));
        teller.add(new Option('80', '80'));
    } else if (teller2Value === 'F') {
        teller.add(new Option('Durchmesser', '0'));
        teller.add(new Option('19', '19'));
        teller.add(new Option('20', '20'));
        teller.add(new Option('30', '30'));
        teller.add(new Option('33', '33'));
        teller.add(new Option('35', '35'));
        teller.add(new Option('40', '40'));
        teller.add(new Option('45', '45'));
        teller.add(new Option('50', '50'));
        teller.add(new Option('60', '60'));
        
    }
});

型
它的工作原理很简单（至少现在是这样），图像显示的方式应该是在变化中。

jquery 如何给s赋值< select>< option>以显示以val命名的特定图像？

1条答案

相关问题

热门标签

最新问答