Question

创建了一个jsfiddle

我有一行带有选择框的图像，以确定它是什么类型的图像。这些是选项：

<select name="image-type">
    <option value="none">Select Image Type</option>
    <option value="small-thumbnail">Small Thumbnail (70x50)</option>
    <option value="thumbnail" selected="selected">Thumbnail (140x100)</option>
    <option value="feature">Feature</option>
    <option value="gallery">Gallery</option>
</select>

现在，当有多行图像时，我只想将一行指定为功能。如果另一行当前设置为功能，则应将其重置为选择图像类型。与小缩略图和缩略图相同。

可以将多个图像设置为选择图像类型和图库。

我一直在尝试使用以下jQuery：

$('#image_container').on('change', '[name="image-type"]', function() {
    $this = $(this);

    $('[name="image-type"]').not($this).each(function() {
        if ($(this).val() === 'feature') {
            $(this).val('none');
        }
    });
});

我已经尝试了一些这方面的变化而且我已经接近了，但我尝试过的任何东西似乎都没有准确地做到。有人可以帮助我吗？

Answer 1

updated jsFiddle DEMO

有几件事：

小提琴中的容器区域错误，您需要：#image_library。此外，如果您需要所选选项的值，您需要执行以下操作：$(this).find('option:selected').val()。

$('#image_library').on('change', '[name="image-type"]', function() {
    var $this = $(this),
        _current = $(this).find('option:selected').val(); // save current val

    // we're only allowing 'gallery' to have multiple

    if (_current !== 'gallery') {

        // loop through all selects to remove any matching values
        $('[name="image-type"]').not($this).each(function() {

            if ($(this).find('option:selected').val() === _current) {
                $(this).val('');
            }
        });
    }
});

Answer 2

jsFiddle

在@mcpDESIGNS精细工作的基础上，我删除了硬编码的"feature"值，而是获得了当前所选选项的值。然后，您可以迭代其他下拉菜单并进行相应的比较。

请注意，如果没有var关键字，您的$this变量的范围将限定为全局。

$('#image_library').on('change', '[name="image-type"]', function() {
    // without the var, you're creating a global variable $this...
    var $this = $(this),
        thisValue = $this.find('option:selected').val();

    // using find() with an id context is faster
    $('#image_library').find('[name="image-type"]').not($this).each(function() {
        //console.log($(this).find('option:selected').val());
        if ($(this).find('option:selected').val() === thisValue) {
            $(this).val('');
        }
    });
});

仅允许选择某个值的一个选择选项

2 个答案: