Question

我正在尝试在div点击上更改多个选择，问题是只有最后一次点击才能保持选中状态，如果有人知道如何解决此问题，我将不胜感激。

编辑： 选择是动态的，所以我不知道会有多少个选择，因此我不能给它们一个类或ID，我仅有的数据是选项值。

$("div").on("click", function() {
  $("select").val($(this).data("value"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-value="1">1</div>
<div data-value="2">2</div>
<div data-value="3">3</div>

<div data-value="a">a</div>
<div data-value="b">b</div>
<div data-value="c">c</div>

<select>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<select>
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="c">c</option>
</select>

Answer 1

您应该指定要填充的select，否则它将尝试用您单击的值来更新两个select。一旦select中的值不同，用户单击后其中之一将始终保持空白。

我建议采取以下策略，为每个select设置一个类，并使用与该类相关的data-属性。

        
    $("div").on("click", function() {
        var targetClass = $(this).data("target");
        $("select" + targetClass).val($(this).data("value"));
    });

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    </script>
    
    <div data-value="1" data-target=".first">1</div>
    <div data-value="1" data-target=".first">1</div>
    <div data-value="2" data-target=".first">2</div>
    <div data-value="3" data-target=".first">3</div>

    <div data-value="a"  data-target=".second">a</div>
    <div data-value="b" data-target=".second">b</div>
    <div data-value="c" data-target=".second">c</div>

    <select class="first">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <select class="second">
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="c">c</option>
    </select>

Answer 2

您的data-value值对两个选择均无效。如果您尝试设置该选项的选项之一中不存在的值，则不会显示任何值。

通过使用:has()选择器修饰符，可以使其仅更改包含具有该选项的选项的selects的值。

$("div").on("click", function() {
  let newval = $(this).data("value");
  $(`select:has([value='${newval}'])`).val(newval);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-value="1">1</div>
<div data-value="2">2</div>
<div data-value="3">3</div>

<div data-value="a">a</div>
<div data-value="b">b</div>
<div data-value="c">c</div>

<select>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<select>
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="c">c</option>
</select>

Answer 3

如果通过将每个div的属性@echo off setlocal EnableDelayedExpansion rem Define the array with options set "n=0" for %%a in (Option1 Option2 Option3) do ( set /A n+=1 set "option[!n!]=%%a" ) rem Define selected/unselected colors set "selected=FB" set "unselected=0B" for /F %%a in ('echo prompt $H ^| cmd') do set "DEL=%%a" goto :Start :ColorText <NUL set /P "=%DEL% " > "%~2" findstr /V /A:%1 /R "^$" "%~2" NUL del "%~2" > NUL 2>&1 exit /B :Start set /A "select=1, newSelect=1" for /L %%i in (2,1,%n%) do set "color[%%i]=%unselected%" :menu set "color[%select%]=%unselected%" set "select=%newSelect%" set "color[%select%]=%selected%" cls call :ColorText 0A "Menu" echo/ for /L %%i in (1,1,%n%) do ( call :ColorText !color[%%i]! "!option[%%i]!" echo/ ) call :ColorText 0E "(W and S to scroll and Q to select)" :choice choice /C:WSQ /N > NUL goto Key-%errorlevel% :Key-1 W = Up menu if %select% equ 1 goto choice set /A newSelect=select-1 goto menu :Key-2 S = Down menu if %select% equ %n% goto choice set /A newSelect=select+1 goto menu :Key-3 Q = Select current option echo/ echo This is !option[%select%]! pause goto Start或s的属性numbers指向第一选择或第二选择，则将每个div链接到一个选择。仅在单击div时更改选择的内容。

letters

$("div").on("click", function() {
  var sel = this.getAttribute('s')
  $("#"+sel).val($(this).data("value"));
});

多项选择在div点击时发生变化

3 个答案: