Question

我有一些代码可以将选项列表添加到选择列表中。但是，我需要做的是比较已输入的值，以便用户无法输入重写值。我知道如何比较值，但无法理解如何检查已输入的值。

如果有人能说清楚如何做到这一点，我将不胜感激。非常感谢

JS

$(function() {
  $(document).on('click', '#add', function() {
    var boxvalue = $("#box_input").val();
    if (boxvalue == '') {
      $("#niinputmessage").fadeIn(3000).html('No blank entries').fadeOut(5000).css({
        'color': 'red',
        'margin-left': '5px',
        'margin-top': '5px'
      });
      return false;
    }
    count = $('#box_ni').children('option').length;
    $("#counter").html("Total selected boxes for intake: " + '<span style="font-size: 14px; color: black;">' + '( ' + count + ' )' + '</span>').css('color:, black');
    if (count > 2) {
      $("#counter").html("No more than 3 items per intake. Please remove items from the list.");
      return false;
    } else {
      count++;
      $("#counter").html("Total selected boxes for intake: " + '<span style="font-size: 14px; color: black;">' + '( ' + count + ' )' + '</span>').css('color:, black');
    }
    $("#box_ni").append("<option>" + boxvalue + "</option>");
    $("#box_input").val('');
  });
});

js删除功能

$(function() {
  $(document).on('click', '#remove', function() {
    $("#box_ni > option:selected").each(function() {
      $("#box_ni option:selected").remove();
      count--;
    });
    $("#counter").html("Total selected boxes for intake: " + 
      '<span style="font-size: 14px; color: black;">' + '( ' + count + ' )' + 
      '</span>').css('color:, black');
  });
});

Answer 1

可以使用选择器检查value，但是从附加脚本中，您不是要添加值，而是<option>value</option>（而不是使用值<option value='value'>value</value> ）。

您可以通过查看每个选项的.text()来过滤结果：

if ($("#box_ni option").filter(function (i,e) { 
        return $(e).text() == boxvalue ; 
    }).length > 0)
{
    $("#counter").html("You've already selected that");
}

显示可能的值和文本检查的片段：

var newval = "1"
console.log("1", $("#sel option[value='"+newval+"']").length == 1)

var newval = "3"
console.log("3", $("#sel option[value='"+newval+"']").length == 1)

var newtext = "one"
console.log("one", $("#sel option").filter(function (i,e) { return $(e).text() == newtext; }).length == 1)

var newtext = "three"
console.log("three", $("#sel option").filter(function (i,e) { return $(e).text() == newtext; }).length == 1)

<select id='sel'>
<option value="1">one</option>
<option value="2">two</option>
</select>

Answer 2

add this in place of $("#box_ni").append....    
var values = document.getElementsByTagName('option');  
var j=0;  
for(i=0; i < values.length; i++){  
  if(boxvalue == values[i].innerHTML){               
   j++;  
     }  
 }
 if(j==0){
 $("#box_ni").append("<option>" + boxvalue + "</option>");  
 }

Answer 3

您可以尝试维护数组中的值列表，并使用它来表示列表的条目。

$(function() {
  let boxvalues = [];
  $(document).on('click', '#add', function() {
    var boxvalue = $("#box_input").val();
    if (boxvalue == '') {
      $("#niinputmessage").fadeIn(3000).html('No blank entries').fadeOut(5000).css({
        'color': 'red',
        'margin-left': '5px',
        'margin-top': '5px'
      });
      return false;
    }
    count = $('#box_ni').children('option').length;
    $("#counter").html("Total selected boxes for intake: " + '<span style="font-size: 14px; color: black;">' + '( ' + count + ' )' + '</span>').css('color:, black');
    if (count > 2) {
      $("#counter").html("No more than 3 items per intake. Please remove items from the list.");
      return false;
    } else {
      count++;
      $("#counter").html("Total selected boxes for intake: " + '<span style="font-size: 14px; color: black;">' + '( ' + count + ' )' + '</span>').css('color:, black');
    }
    //Checks and adds the entries
    if(boxvalues.indexOf(boxvalue) === -1) {
      boxvalues.push(boxvalue)
      $("#box_ni").append("<option>" + boxvalue + "</option>");      
    }
    $("#box_input").val('');
  });
});

检查下拉列表中的重写值

3 个答案: