只允许一个有一定的价值选择选项来选择

Question

我创建了这个在的jsfiddle http://jsfiddle.net/MZtML/

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

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