javascript - 通过选定的选项值设置输入值

Question

我想做的是设置 kabelname，它是由选择的选项设置到输入字段中的，方法是像选项字段的顺序一样对名称进行排序。

这应该通过选择或取消选择一个选项而不覆盖整个输入字段来实现。它应该只添加或删除所选选项的值。

如果选择了 kabelart 且 steckertyp 为 1，则应将 steckertyp1 的值与 kabelart 的值一起添加到 kabelname 的输入字段中。

然后，如果选择了 Verwendung，则应将其添加到带有“.”的 kabelname。和值(value)。否则，如果选择 Verwendung 但未选择 Steckertyp，则应在 kabelname 中添加“-”。

Anschlusstyp 也应该发生同样的事情......

如果 kabelart 设置为 ""，那么应该清除 kabelname。但是，如果其他选项之一被更改或设置为“”，则只应在其位置上将其删除。

我很抱歉描述不当，但我希望你明白我的意思。如果没有，请随时询问。

谢谢

function changedKabelart(kabelartValue){
  var kaValue = kabelartValue;
  
  if(kaValue != ""){      
    document.getElementById("kabelname").value = kaValue;
  }
  else{
    document.getElementById("kabelname").value = kaValue;     
  }
}

/* Steckertyp 1 */
function changedSteckertyp1(sttyp1Value){
  var st1Value = sttyp1Value;
  
  if(st1Value != ""){
    document.getElementById("kabelname").value += "-" + st1Value;
  }
  else{          
    document.getElementById("kabelname").value += st1Value;
  }          
}

/* Verwendung */
function changedVerwendung(verwendungValue){
  var vwValue = verwendungValue;
  var st1Value = document.getElementById("steckertyp1").value;
  
  
  if(vwValue != "" && st1Value != ""){
    document.getElementById("kabelname").value += "." + vwValue;
  }
  else if(vwValue != "" && st1Value == ""){
    document.getElementById("kabelname").value += "-" + vwValue;
  }
  else{          
    document.getElementById("kabelname").value += vwValue;
  }          
}
      
/* Anschlusstyp 1 */
function changedAnschluss1(anschluss1Value){
  var ansch1Value = anschluss1Value;
  
  if(ansch1Value != ""){
    document.getElementById("kabelname").value += "-" + ansch1Value;
  }
  else{            
    document.getElementById("kabelname").value += ansch1Value;
  }          
}

<p> Kabelart </p>
<select name="kabelart" id="kabelart" required onchange="changedKabelart(this.value);"> 
  <option value="" selected></option>   
  <option value="K" > Kabel</option>   
  <option value="K2" > Kabel 2</option>   
  <option value="K3" > Kabel 3</option>   
</select>

<p> Steckertyp </p>
<select name="steckertyp1" id="steckertyp1" onchange="changedSteckertyp1(this.value);">
  <option value="" selected></option>
  <option value="ST1" >ST1</option>
  <option value="ST2" >ST2</option>
  <option value="ST3" >ST3</option>
</select>

<p> Verwendung </p>
<select name="verwendung" id="verwendung" onchange="changedVerwendung(this.value);" >
  <option value="" selected></option>   
  <option value="VW1" >VW1</option>   
  <option value="VW2" >VW1</option>   
</select>

<p> Anschlusstyp </p>
<select name="anschlusstyp1" id="anschlusstyp1" onchange="changedAnschluss1(this.value);" >
  <option value="" selected></option>  
  <option value="A1" >A1</option>  
  <option value="A2" >A2</option>  
  <option value="A3" >A3</option>  
</select>

<br><br><br>
<input type="text" name="kabelname" id="kabelname" placeholder="Kabelname" readonly />

Answer 1

与其使用不同的函数来更新 kabelname，不如只使用一个。然后一切都会被覆盖。

            <p> Kabelart </p>
        <select name="kabelart" id="kabelart" required onchange="update();"> 
          <option value="" selected></option>   
          <option value="K" > Kabel</option>   
          <option value="K2" > Kabel 2</option>   
          <option value="K3" > Kabel 3</option>   
        </select>

        <p> Steckertyp </p>
        <select name="steckertyp1" id="steckertyp1" onchange="update();">
          <option value="" selected></option>
          <option value="ST1" >ST1</option>
          <option value="ST2" >ST2</option>
          <option value="ST3" >ST3</option>
        </select>

        <p> Verwendung </p>
        <select name="verwendung" id="verwendung" onchange="update();" >
          <option value="" selected></option>   
          <option value="VW1" >VW1</option>   
          <option value="VW2" >VW1</option>   
        </select>

        <p> Anschlusstyp </p>
        <select name="anschlusstyp1" id="anschlusstyp1" onchange="update();" >
          <option value="" selected></option>  
          <option value="A1" >A1</option>  
          <option value="A2" >A2</option>  
          <option value="A3" >A3</option>  
        </select>

        <br><br><br>
        <input type="text" name="kabelname" id="kabelname" placeholder="Kabelname" readonly />


        <script>
        function update() {
            var kabelname ;
            if(document.getElementById("kabelart").value === "") {  
              kabelname = "";
            }
            else {
                kabelname = document.getElementById("kabelart").value;

                if(document.getElementById("steckertyp1").value!== ""){
                    kabelname += "-" + document.getElementById("steckertyp1").value;
                    if(document.getElementById("verwendung").value !== "") {
                        kabelname += "." + document.getElementById("verwendung").value;
                        if(document.getElementById("anschlusstyp1").value!== "") {
                            kabelname += "-" + document.getElementById("anschlusstyp1").value;
                        }
                    }
                    else {
                        if(document.getElementById("anschlusstyp1").value!== "") {
                            kabelname += "." + document.getElementById("anschlusstyp1").value;
                        }    
                    }
                }
                else {
                    if(document.getElementById("verwendung").value !== "") {
                        kabelname += "-" + document.getElementById("verwendung").value;
                        if(document.getElementById("anschlusstyp1").value!== "") {
                            kabelname += "." + document.getElementById("anschlusstyp1").value;
                        }
                    }
                    else {
                        if(document.getElementById("anschlusstyp1").value!== "") {
                            kabelname += "-" + document.getElementById("anschlusstyp1").value;
                        }                            
                    }
                }

            }                
            document.getElementById("kabelname").value = kabelname;                
        }

        </script>