标签: multi-select

我有一个 WPF DataGrid 控件，其 SelectionUnit 为“FullRow”，SelectionMode 为“Extended”，我正在以编程方式选择其中的项目（通常是第一个项目）。该选择有效，但由于某种原因，任何形式的程序选择似乎都会破坏移位选择多选功能。

如果我单击 DataGrid 中的另一个项目（因此我刚刚单击的项目是唯一选定的项目），则 Shift-Select 将起作用。只有当我以编程方式选择该项目时，它似乎才会中断。此外，在任何一种情况下，按住 Control 键单击都可以选择多个项目——似乎只有 Shift 键选择被破坏了。

我尝试过以编程方式选择单个项目的各种形式，从简单的 myGrid.SelectedIndex = 0 到使用 DataGrid 的 ItemContainerGenerator 获取 DataGridRow 对象的实例并在其上设置 IsSelected = true，但都无济于事。

重申一下——以编程方式选择项目是可行的，但它会破坏按住 Shift 键并单击的选择。

以前有人遇到过这个吗？我尝试将焦点设置在以编程方式选择的 DataGridRow 实例上，但它似乎没有帮助？

我在我的智慧的尽头试图弄清楚这一点。我在 WPF 方面很有经验，但我从未见过这样的事情。

我有一个包含可选 ListBoxItems 的 ListBox。列表中的项目可以通过鼠标点击或使用向上/向下箭头来选择。我正在使用 SelectionMode.Extended，所以我的列表支持多选。

问题：单击列表中的一个项目，然后按住 Shift 的同时单击另一个项目，会像您期望的那样选择正确的项目范围。不幸的是，使用向上/向下箭头无法正常工作 - 相反，选择的范围似乎总是基于最后一个 CLICKED 项目，而不是使用箭头键选择的项目。

例如：

[Item 1] <- Click this item
[Item 2] <- Use the down arrow to select this item
[Item 3] <- Shift-Click this item

您可能希望选择项目 2 和 3，而是选择所有项目（1、2 和 3）。

所有 ListBox 属性都有正确的值（即使用箭头键更新 SelectedItems 属性），我唯一的问题似乎是 ListBox 如何在内部处理 Shift-Click 选择。据我所知，我相信这与 ListBox 的“多选锚点”通过鼠标点击设置有关，但与箭头键无关。

有没有人遇到并解决过这个问题？有没有办法手动设置“多选锚点”？谢谢你的帮助！

克里斯

我正在使用jQueryUI 多选小部件，它为多选绘制了一个漂亮的下拉菜单小部件。

我已经排序了（在用户名上）多重选择，如下所示：

<select multiple="multiple" name="users" id="id_users">
<option value="1" selected="selected">aaa</option>
<option value="44">bbb</option>
<option value="21" selected="selected">ccc</option>
<option value="50">ddd</option>
<option value="16">eee</option>
<option value="25" selected="selected">fff</option>
</select>

我想保持用户名排序，但每次用户打开下拉菜单时将所选项目移动到列表顶部。因此，在此示例中，新顺序必须是：

<select multiple="multiple" name="users" id="id_users">
<option value="1" selected="selected">aaa</option>
<option value="21" selected="selected">ccc</option>
<option value="25" selected="selected">fff</option>
<option value="44">bbb</option>
<option value="50">ddd</option>
<option value="16">eee</option>
</select>

从该小部件的网站上，我看到它有一个返回所选项目数组的方法，并且它有一个 beforeopen 事件。所以我认为我可以通过处理 beforeopen 事件来管理排序（使用该数组），但我对 javascript 相当陌生，任何人都可以指出我正确的方向吗？

我在这里搜索，我找到的所有解决方案都解决了“按文本排序”的问题（这不是我需要的）。

编辑：我用这种方式解决了：

$('#id_users').multiselect({
    beforeopen: function(event, ui) {
        $('#id_users option:selected').prependTo('#id_users');
        $('#id_users').multiselect('refresh');
    }
});

因此，在小部件的初始化中，我将这两行代码绑定到 beforeopen 事件。在 beforeopen 的处理中，我将所选项目添加到其他项目之前，并刷新小部件（因为它只读取多选一次，并且如果不刷新，即使 HTML 发生更改，顺序也保持不变）。

我无法投票赞成答案，因为我没有足够的声誉。但谢谢！

我正在尝试使用嵌套 UL 和 jqueryUI 可选构建一个两级多选控件。

目前，我将选择限制为子级别，但我真正想要的是能够选择父 LI 并选择其所有子 LI。更进一步，我希望能够选择所有子 LI 并选择其父级。任何少于选定的所有子 LI 的内容都将导致父级 LI 被取消选择。

基本标记：

<ul id="theParentList">
    <li>Parent 1
        <ul>
            <li>Child 1.1</li>
            <li>Child 1.2</li>
        </ul>
    </li>
    <li>Parent 2
        <ul>
            <li>Child 2.1</li>
            <li>Child 2.2</li>
        </ul>
    </li>
</ul>

和当前的 JavaScript：

$('#theParentList').selectable({filter: 'li li'});

我将如何完成第一部分：选择父级会选择其所有子级？

谢谢！

更新：
我现在已经了解了这个概念的大部分内容：
选择父项会选择它的所有子项；
取消选择子项将取消选择其父项

仍然不起作用：选择父级的所有子级应该选择父级

这就是我现在所得到的：

标记：

<ul id="theParentList">
    <li class="level-1">
        <div>Parent 1</div>
        <ul class="level-2">
            <li><div>Child 1.1</div></li>
            <li><div>Child 1.2</div></li>
        </ul>
    </li>
    <li class="level-1"><div>Parent 2</div>
        <ul class="level-2">
            <li><div>Child 2.1</div></li>
            <li><div>Child 2.2</div></li>
        </ul>
    </li>
</ul>

和js：

    function SelectSelectableElement …

我有一个几年前为我的公司制作的 MS Access 数据库。我正在尝试将表单条目从组合框更改为多选组合框（复选框）。目前，只能保存一个值，我希望能够保存多个值。

组合框的数据来自单独的表。

在表单设置中，访问权限仅允许我将组合框更改为列表框或文本框，但这两个选项都不允许我选择多个值。

帮助。

我正在尝试从有 10 个选项的多项选择中选择P0_ENGLISH, P1_ENGLISH, 。P5_ENGLISH我只想选择这 3 个选项。

HTML 代码：

<select multiple="" class="gwt-ListBox" style="height: 80px; width: 205px;">
    <option title="Generic_Eng" value="Generic_Eng">Generic_Eng</option>
    <option title="Generic_Hindi" value="Generic_Hindi">Generic_Hindi</option>
    <option title="P0_English" value="P0_English">P0_English</option>
    <option title="P0_Hindi" value="P0_Hindi">P0_Hindi</option>
    <option title="P1_English" value="P1_English">P1_English</option>
    <option title="P1_Hindi" value="P1_Hindi">P1_Hindi</option>
    <option title="P4_English" value="P4_English">P4_English</option>
    <option title="P4_Hindi" value="P4_Hindi">P4_Hindi</option>
    <option title="P5_English" value="P5_English">P5_English</option>
    <option title="P5_Hindi" value="P5_Hindi">P5_Hindi</option>
</select>

硒-Python代码：

queues = Select(driver.find_element_by_css_selector(".rowStyle1:nth-child(6) .gwt-ListBox"))
queues.select_by_visible_text("P0_English")
time.sleep(3)
queues.select_by_visible_text("P1_English")
time.sleep(3)
queues.select_by_visible_text("P5_English"

我尝试过使用这段代码。使用此代码，我可以选择第一个选项，即“P0_ENGLISH”。但是，选择第一个选项后出现错误：

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: element is not attached to the page document

我正在研究 ng-multi-select 下拉菜单（在 Angular7 中），并且我能够在外部更改宽度大小。但是，我无法更改所选文本的颜色，也无法更改复选框颜色。简而言之，我需要将蓝色更改为灰色。我尝试了不同的解决方案但没有成功。我可以从下面的代码中看到我做错了什么吗？

我需要通过拖动字母来创建单词。\n我进行了搜索，但找不到足够的代码来检测运动事件。\n我想通过用手指滑动来选择多个字母，并从所选字母创建单词。\n我需要制作一个如下所示的单词益智游戏。\ n\n我怎样才能制作这样的游戏？\n\xc2\xa0

我有一个多重选择，我将一个对象传递到具有结构的 value 属性中：

选择组件如下所示：

<Select
            multiple
            value={entities}
            onChange={handleChange}
            input={<Input />}
            renderValue={(selected) => (
              <div className={classes.chips}>
                {selected.map((value) => (
                  <Chip
                    key={value.entityId}
                    label={value.entityName}
                    className={classes.chip}
                  />
                ))}
              </div>
            )}
          >
            {props.entityList.map((item, index) => (
              <MenuItem key={item.entityId} value={item}>
                {item.entityName}
              </MenuItem>
            ))}
          </Select>

当弹出选择时，它会显示正确的实体名称，但不会将其显示为在下拉列表中选择。

如果我在下拉列表中选择此项目，它会添加另一个具有相同 id 和相同名称的条目，而不是删除已经存在的项目，这个新添加的重复项可以被删除，并在选择时突出显示，因此该功能可以正常工作。

我存储entities的状态类似于来自父组件的状态：

解决方案：

我已确保在选择中使用相同的对象，初始对象与在更改函数中分配的对象不同。这解决了我的问题。

const [entities, setEntity] = React.useState(
props.entityList.filter((e) =>
  props.assignedEntities.some((ae) => e.entityId === ae.entityId)
)

）；

下面是我的代码示例。primeng 多重选择是 primeng 下拉列表的来源：

HTML：

<p-multiSelect [options]="elements" [(ngModel)]="selectedElements" optionLabel="name" display="chip"
  (onChange)="onElementChange($event)"></p-multiSelect
  
<p-dropdown [options]="availableElements" [(ngModel)]="selectedElement" optionLabel="elementID"
      placeholder="Select an Element"></p-dropdown>

TS：

onElementChange(event) {
  this.availableElements = [];
  this.availableElements = event.value;
}

从多选下拉列表中选择元素完全有效，但是当我从多选芯片中删除元素时，不会触发 onChange 事件：

如何触发onChange？这是一个不受支持的事件吗？提前致谢。