通過選擇的選項值設置輸入值

Question

我想要做的就是通過按照選項字段的順序排列名稱來設置kabelname，該選項由selcted選項設置到輸入字段中。

這應該通過選擇或取消選擇一個選項而發生，而不會覆蓋整個輸入fild。它應該只添加或刪除選定選項的值。

如果選擇kabelart且steckertyp爲1，則應將steckertyp1的值添加一個「 - 」以將kabelart的值添加到kabelname的輸入字段中。

然後，如果選擇了Verwendung，則應使用「。」將其添加到kabelname。和價值。否則，如果選擇了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>