代码之家 › 专栏 › 技术社区 › user869375

为什么在多选列表中第二次没有选择该选项?

html javascript

user869375 · 技术社区 · 6 年前

我需要通过JavaScript在multi-select中选择deselect选项。代码看起来没问题,但在您第二次尝试选择同一项时不会触发。

所以试着选择 全日制

$('.multi-select option').on('mousedown',function (e) {
    e.preventDefault();

    selectTop = $(this).parent().scrollTop(); 
    var before = $(this).prop("selected");
    console.warn("before: " + before);
    if (before == true) {
        $(this).prop("selected", false);
    }
    else {
        $(this).attr("selected", "selected");
    }
    console.info("Changed from " + before + " to " + $(this).prop('selected'));	
    mustChangeScrollTop = true;

    return true;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
  
  <head>
    <title>Multi select jquery test</title>
  </head>
  
  <body>
    <select size="6" name="WorkSchedule" multiple="multiple" id="WorkSchedule" class="form-control multi-select">
			<option value="">Select All That Apply</option>
			<option value="4">Full-Time</option>
			<option value="5" >Part-Time</option>
			<option value="6" >Per Diem</option>
			<option value="7">Locum Tenens</option>
		</select>
  </body>

</html>

2 回复 | 直到 6 年前

freginold 6 年前

问题很小;你的 else .attr 价值而不是 .prop 价值。

else {
    $(this).attr("selected", "selected");
}

.属性 更改为在 其他的

$('.multi-select option').on('mousedown',function (e) {
    e.preventDefault();

    selectTop = $(this).parent().scrollTop(); 
    var before = $(this).prop("selected");
    console.warn("before: " + before);
    if (before == true) {
        $(this).prop("selected", false);
    }
    else {
        $(this).prop("selected", "selected");
    }
    console.info("Changed from " + before + " to " + $(this).prop('selected'));	
    mustChangeScrollTop = true;

    return true;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
  
  <head>
    <title>Multi select jquery test</title>
  </head>
  
  <body>
    <select size="6" name="WorkSchedule" multiple="multiple" id="WorkSchedule" class="form-control multi-select">
			<option value="">Select All That Apply</option>
			<option value="4">Full-Time</option>
			<option value="5" >Part-Time</option>
			<option value="6" >Per Diem</option>
			<option value="7">Locum Tenens</option>
		</select>
  </body>

</html>

maha 6 年前

如果我完全明白你的意思,那么这应该是你想要的,只要一点点零钱。

$('.multi-select option').on('mousedown',function (e) {
    e.preventDefault();

    selectTop = $(this).parent().scrollTop(); 
    var before = $(this).prop("selected");
    console.warn("before: " + before);
    if (before == true) {
        $(this).prop("selected", false);
    }
    else {
        $(this).prop("selected", true);  //the change is here
    }
    console.info("Changed from " + before + " to " + $(this).prop('selected'));	
    mustChangeScrollTop = true;

    return true;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
  
  <head>
    <title>Multi select jquery test</title>
  </head>
  
  <body>
    <select size="6" name="WorkSchedule" multiple="multiple" id="WorkSchedule" class="form-control multi-select">
			<option value="">Select All That Apply</option>
			<option value="4">Full-Time</option>
			<option value="5" >Part-Time</option>
			<option value="6" >Per Diem</option>
			<option value="7">Locum Tenens</option>
		</select>
  </body>

</html>