两个选定的输入具有相同的值

时间:2018-12-28 21:45:13

标签: javascript jquery

我尝试使用这种方法为用户创建一个系统来选择他们希望的排名,当从用户选择的2个选择输入中查找时,我陷入了jquery,例如,这就是我所做的。

现在,如果用户从当前排名中选择“银3”,则我想阻止用户选择“银2”,“银1”等...

    $('select').change(function(){
      var sum = 0;
      $('select :selected').each(function() {
          sum += Number($(this).val());
      });
           $("#total").html(sum);
           $('input[name=amount]').val(sum);
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Your RANK</p>
    <select name='anch1'>
     <option value='10'>Silver 1</option>
     <option value='20'>Silver 2</option>
     <option value='30'>Silver 3</option>
     <option value='40'>Silver 4</option>
     <option value='50'>Silver Elite</option>
     <option value='60'>Silver Elite Master</option>
     <option value='70'>Gold Nova 1</option>
     <option value='80'>Gold Nova 2</option>
     <option value='90'>Gold Nova 3</option>
     <option value='100'>Gold Nova Master</option>
     <option value='110'>Master Guardian</option>
     <option value='120'>Master Guardian 2</option>
     <option value='130'>Master Guardian Elite</option>
     <option value="140">Distinguished Master Guardian</option>
     <option value="150">Legendary Eagle</option>
     <option value="160">Legendary Eagle Master</option>
     <option value="170">Supreme master First Class</option>
    </select>
<p>Desire Rank</p>
    <select name='anch2'>
      <option value='10'>Silver 1</option>
      <option value='20'>Silver 2</option>
      <option value='30'>Silver 3</option>
      <option value='40'>Silver 4</option>
      <option value='50'>Silver Elite</option>
      <option value='60'>Silver Elite Master</option>
      <option value='70'>Gold Nova 1</option>
      <option value='80'>Gold Nova 2</option>
      <option value='90'>Gold Nova 3</option>
      <option value='100'>Gold Nova Master</option>
      <option value='110'>Master Guardian</option>
      <option value='120'>Master Guardian 2</option>
      <option value='130'>Master Guardian Elite</option>
      <option value="140">Distinguished Master Guardian</option>
      <option value="150">Legendary Eagle</option>
      <option value="160">Legendary Eagle Master</option>
      <option value="170">Supreme master First Class</option>
      <option value="180">The Global Elite</option>
    </select>
    
      <p id="total">total: </p>

2 个答案:

答案 0 :(得分:3)

我认为您正在寻找类似的东西,但是您可能需要的东西有点少,但是可以尝试一下:

    public string[] colors = new string[] { "#FFFF0000", "#FF00FF00", "#FF0000FF", "#FFFFFF00", "#FFFF00FF", "#FF00FFFF" };
    public byte[] pixels = new byte[] { 0, 0, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5 };

    public byte scale = 2;

    public void PaintPixels()
    {
        Graphics g = CreateGraphics();

        int x = 0;
        int y = 0;

        for (int p = 0;  p < pixels.Length; p++)
        {
            using (var brush = new SolidBrush(ColorTranslator.FromHtml(colors[pixels[p]])))
            {
                g.FillRectangle(brush, x, y, scale, scale);
            }

            x += scale;

            if(x > 255)
            {
                y += scale;
                x = 0;
            }
        }
    }

    private void Form1_Load(object sender, EventArgs e)
    {
        Width = 256 * scale;
        Height = 240 * scale;

        PaintPixels();
    }

工作演示

$('select[name^="anch"]').change(function() {
  var sum = 0;
  $('select[name^="anch"] :selected').each(function() {
    sum += Number($(this).val());
  });
  $("#total").html(sum);
  $('input[name=amount]').val(sum);

  var n1 = $('select[name="anch1"]').val();

  if (n1 != 10) {
    $('select[name="anch2"] option').removeAttr('disabled');
    var o2 =  $('select[name="anch2"] option').filter(function() {
      return this.value <= n1
    });
    $(o2).attr('disabled', 'disabled');
  }
});
$('select[name^="anch"]').change(function() {
  var sum = 0;
  $('select[name^="anch"] :selected').each(function() {
    sum += Number($(this).val());
  });
  $("#total").html(sum);
  $('input[name=amount]').val(sum);

  var n1 = $('select[name="anch1"]').val();

  if (n1 != 10) {
    $('select[name="anch2"] option').removeAttr('disabled');
    var o2 =  $('select[name="anch2"] option').filter(function() {
      return this.value <= n1
    });
    $(o2).attr('disabled', 'disabled');
  }
});

答案 1 :(得分:0)

我认为您可以为首次选择设置“ onchange”事件处理程序(您可以使用ID甚至名称来区分它们)。该处理程序必须删除第二个选择的所有选项,并且仅将其值>(大于)实际选择的选项添加。例如,您可以在数组中拥有所有选项(我认为它们是静态的,并且它们不是来自其他数据源,例如API的端点)。

如果您理解我的意思,请告诉我。我现在没有工具来向您显示代码。

谢谢!