需要一个 jquery 脚本,根据最终用户的当前选择从选择框中移动选定的选项
P粉170858678
P粉170858678 2024-04-04 18:40:04
0
1
3710

我有一个 HTML 页面,最终用户可以通过选择框元素对我们的项目进行排名。

请参阅小提琴来观看简单的演示:

https://jsfiddle.net/Balkanlii/ghecv1j8/1/

我想构建一个jquery脚本,在第二次选择相同排名的情况下(如果最终用户改变主意等),它会改变所选选项。所以:

  • 假设项目 1 被选为排名第一,那么当最终用户来到项目 2 并决定将此项目设置为第一时,他应该只选择此处的选项 1,而其他项目则应选择自动设置为等级2。

  • 假设项目 1 被选为排名第一,项目 2 被选为排名第二。然后,假设当最终用户检查项目 3 时,他决定将其设置为排名第一。一旦他这样做了,项目 1 应该自动排名第二,项目 2 应该自动排名第三。

我已经构建了一个可以成功用于此目的的查询,但是脚本因以下条件而损坏:

  • 假设项目 1 被选为排名第二,则项目 2 被选为排名第一。这导致项目 1 自动排名第三,而实际上没有排名第二的项目。

如何修复它?

另外,有没有比我的方法更好的方法,我想知道,因为我是如何做到的,它变得越来越复杂。

如有任何帮助,我们将不胜感激。

到目前为止我的 jQuery 脚本:

var previousValue = 0;
$("select[class='myclass']").on('focusin', function(){
     previousValue = $(this).val();
});

$("select[class='myclass']").on('change', function (event) { 
    var prevValue = parseInt(previousValue);
    var selectedValue = parseInt($(this).val());
    var selectedId = $(this).attr('id');

    $('#' + selectedId + " option").removeAttr("selected");
    $('#' + selectedId + " option[value=\""+selectedValue+"\"]").attr('selected', true);

    $("select[class='myclass']").each(function (index, element) { 
           var eval = parseInt($('#' + element.id).val());
            if (prevValue !== 0 && selectedValue !== 0) {
                if (eval >= selectedValue && (eval < prevValue) && element.id !== selectedId) {
                       var b = eval + 1;
                        if (b <= 3)
                            $('#' + element.id).prop('selectedIndex', b);
                        $('#' + element.id + " option").removeAttr("selected");
                        $('#' + element.id + " option[value=\"" + b + "\"]").attr('selected', true);

                }
                else if (eval <= selectedValue && (eval > prevValue) && element.id !== selectedId) {
                       var b = eval - 1;
                       $('#' + element.id).prop('selectedIndex', b);
                       $('#' + element.id + " option").removeAttr("selected");
                       $('#' + element.id + " option[value=\"" + b + "\"]").attr('selected', true);
                            }
                }
                else if (prevValue == 0) {
                            if (selectedValue > 0) {
                                if (eval >= selectedValue && element.id !== selectedId) {
                                    var b = eval + 1;
                                    if (b <= 3) {
                                        $('#' + element.id).prop('selectedIndex', b);

                                        $('#' + element.id + " option").removeAttr("selected");
                                        $('#' + element.id + " option[value=\"" + b + "\"]").attr('selected', true);
                                    }
                                }
                            }
                }
        });
 });

P粉170858678
P粉170858678

全部回复(1)
P粉301523298

您可以执行如下操作,禁用其他字段中选定的选项。这是它工作的屏幕录制...

(function($) {

  const $all = $('select.myclass');
  
  $all.on('change input', function() {

    $all.find('option[disabled]').prop('disabled', false);
    
    $all.each(function() {
      const $this = $(this);
      const value = $this.val();
      
      $all.not($this).find(`option[value="${value}"]`)
        .prop('selected', false)
        .prop('disabled', !!parseInt(value));
    });
  });

})(jQuery);
sssccc
Project 1

Project 2
Project 3
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板