1

我在http://jsfiddle.net/MZtML/为此创建了一个 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');
        }
    });
});

我已经尝试了一些变体并且我已经接近了，但是我尝试过的任何东西似乎都不能准确地做到这一点。有人可以帮我吗？

4

2 回答 2

3

更新了 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('');
            }
        });
    }
});

​</p>

于 2012-08-23T17:54:16.550 回答
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('');
        }
    });
});

​</p>

于 2012-08-23T18:34:32.063 回答