Question

我要做的是通过按选项字段的顺序排序名称，将选择的选项设置的kabelname设置到输入字段中。

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

如果选择了kabelart且steckertyp 1，则应将steckertyp1的值加上kabelart的值“k”添加到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>

按选定的选项值

1 个答案: