创建一个依赖于多重选择的输入，它将添加/减去输入的值

Question

我在 JS 中创建了一个自动计数器，从一个选择中选择多个选项，这些选项中的每一个，即特征，发送一个由数字成本确定的数字，从而将数字发送到相同的输入（或几个）。

我的意图是通过放置这些数字，您将处于一般的输入中，或者相反，三个输入，即：X/Y/Z。

在出现负数的情况，出现某种类型的错误，不允许继续。

例如，正面特征“Big Body”将产生-5，而正面特征“With Reflections”将产生-6。在这种情况下，我希望显示的负值没有表示它是负数的破折号。当我添加它们时，这些值将被添加在一起，也就是说，如果我添加正的“大体”和“反射”特征，它将总共生成 -11。

另一方面，正输入中会有一个初始数字，即 X of 10。

原则上，选择会覆盖大约 50 个值，将特征分为正面和负面。正变量总是会产生一个负数，而负变量会产生一个正数。

我真的不知道如何开发它，因为我的想法是将它合并到我制作的表单生成器中。我现在把我所做的事情留给你，这样你就可以看到基本的想法了。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> 
</script><script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"> 
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"> 
</script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">

<select name="rasgos" class="multipleChosen rasgos" multiple="true">
  <optgroup label="Positivos"><option value="Cuerpo grande">Cuerpo grande</option>
  <option value="Musculoso">Musculoso</option>
  <option value="Ágil">Ágil</option>
  <option value="Con reflejos">Con reflejos</option>
  <option value="Preciso">Preciso</option>
  <option value="Afortunado">Afortunado</option>
  <option value="Atento">Atento</option>
  <option value="Agraciado">Agraciado</option>
  <option value="Vivaz">Vivaz</option>
  <option value="Culto">Culto</option>
  <option value="Noble">Noble</option>
  <option value="Líder">Líder</option>
  <option value="Defensor">Defensor</option>
  <option value="Precavido">Precavido</option>
  <option value="Orador">Orador</option>
  <option value="Sagaz">Sagaz</option>
  <option value="Aprendizaje rápido">Aprendizaje rápido</option>
  <option value="Crematomano">Crematomano</option>
  <option value="Regateador">Regateador</option>
  <option value="Domador">Domador</option>
  <optgroup label="Negativos">
  <option value="En los huesos">En los huesos</option>
  <option value="Débil">Débil</option>
  <option value="Lento">Lento</option>
  <option value="Vago">Vago</option>
  <option value="Glotón">Glotón</option>
  <option value="Sin reflejos">Sin reflejos</option>
  <option value="Sin puntería">Sin puntería</option>
  <option value="Torpe">Torpe</option>
  <option value="Dócil">Dócil</option>
  <option value="Honesto">Honesto</option>
  <option value="Obstuto">Obstuto</option>
  <option value="Mal oído">Mal oído</option>
  <option value="Feo">Feo</option>
  <option value="Estéril">Estéril</option>
  <option value="Aprendizaje lento">Aprendizaje lento</option>
  <option value="Testarudo">Testarudo</option>
  <option value="Tartamudo">Tartamudo</option>
  <option value="Disoluto">Disoluto</option>
  <option value="Ceguera">Ceguera</option>
  <option value="Enfermizo">Enfermizo</option>
</select>
<input type="text" disabled="" name="puntosrasgos" class="alin" value="" placeholder="Puntos de Rasgo [PR]"/>

<script>
$('.rasgos').on('change', function() {
var value =this.value;
    if(value == 'Cuerpo grande')
    {
        $('.alin').val('-5');
    }
    
  if(value == 'Musculoso')
    {
        $('.alin').val('-5');
    }
  
   if(value == 'Ágil')
    {
        $('.alin').val('-5');
    }
  
   if(value == 'Con reflejos')
    {
        $('.alin').val('-6');
    }
  
  if(value == 'Preciso')
    {
        $('.alin').val('-6');
    }
  if(value == 'Afortunado')
    {
        $('.alin').val('-6');
    }
    
  if(value == 'Atento')
    {
        $('.alin').val('-4');
    }
  
   if(value == 'Agraciado')
    {
        $('.alin').val('-5');
    }
  
   if(value == 'Vivaz')
    {
        $('.alin').val('-4');
    }
  
  if(value == 'Culto')
    {
        $('.alin').val('-4');
    }
  if(value == 'Noble')
    {
        $('.alin').val('-4');
    }
    
  if(value == 'Líder')
    {
        $('.alin').val('-6');
    }
  
   if(value == 'Defensor')
    {
        $('.alin').val('-6');
    }
  
   if(value == 'Precavido')
    {
        $('.alin').val('-6');
    }
  
  if(value == 'Orador')
    {
        $('.alin').val('-5');
    }
  if(value == 'Sagaz')
    {
        $('.alin').val('-5');
    }
    
  if(value == 'Aprendizaje  rápido')
    {
        $('.alin').val('-6');
    }
  
   if(value == 'Crematomano')
    {
        $('.alin').val('-4');
    }
  
   if(value == 'Regateador')
    {
        $('.alin').val('-4');
    }
  
  if(value == 'Domador')
    {
        $('.alin').val('-5');
    }
    if(value == 'En los huesos')
    {
        $('.alin').val('4');
    }
    
  if(value == 'Débil')
    {
        $('.alin').val('5');
    }
  
   if(value == 'Lento')
    {
        $('.alin').val('5');
    }
  
   if(value == 'Vago')
    {
        $('.alin').val('3');
    }
  
  if(value == 'Glotón')
    {
        $('.alin').val('3');
    }
});
  
  $(document).ready(function(){
  //Chosen
  $(".multipleChosen").chosen({
      placeholder_text_multiple: "Rasgos" //placeholder
	});
  //Select2
  $(".multipleSelect2").select2({
		placeholder: "Rasgos" //placeholder
	});
})

$('.multipleChosen.rasgos')
  
  
</script>

有人可以提供我自己添加的基本 JS 代码吗？非常感谢您，我正在等待您的答复！

Answer 1

我创建了一个带有可能解决方案的 JSFiddle：

https://jsfiddle.net/7b8294ej/

• 我删除了 select2 库，因为它的工作似乎与 chosen 库非常相似。
• 我使用了自定义属性“data-cost”，而不是使用 jQuery 手动初始化成本。
• 我关闭了optgroup 标签。

总体策略：

每次选择/取消选择选项时，您都需要监听 select 发送的更改事件。每次发生变化时，我们都会重新计算成本并更新输入。