Question

我的html有同一类的mutliple下拉框。我从每个输入框中获取一个值，然后将其作为选择器传递给<select>。我从输入框中得到的值是正确的，但我在选择下拉框时遇到了麻烦。

HTML：

<div id="orange">
    <input type="text" class="hide" value="AM" />
    <select class="ampm">
        <option value="AM">AM</option>
        <option value="PM">PM</option>
    </select>
    <br>
    <input type="text" class="hide" value="AM" />
    <select class="ampm">
        <option value="AM">AM</option>
        <option value="PM">PM</option>
    </select>
    <br>
    <input type="text" class="hide" value="PM" />
    <select class="ampm">
        <option value="AM">AM</option>
        <option value="PM">PM</option>
    </select>
</div>
<div id="apple">
    <input type="text" class="hide" value="AM" />
    <select class="ampm">
        <option value="AM">AM</option>
        <option value="PM">PM</option>
    </select>
    <br>
    <input type="text" class="hide" value="PM" />
    <select class="ampm">
        <option value="AM">AM</option>
        <option value="PM">PM</option>
    </select>
</div>

JS：

$(function () {
$('div').each(function(){
    $(this).find('.hide').each(function () { //inputbox
         $(this).find('.ampm').val($(this).val()); //option                        
         alert($(this).val());
     });    
  });
});

JSFiddle FullCode

Answer 1

find在元素中。您的选择框未包含在输入中，因此未找到任何内容。而是将其更改为next：

$(this).next('.ampm').val($(this).val());

http://jsfiddle.net/LpsVn/2/

Answer 2

试试这个

$(function () {
        $('div .hide').each(function () {
             $(this).next('.ampm').val($(this).val());                         
             console.log($(this).val());
         });    
});

演示：Fiddle。

对于一个很酷的解决方案，您可以查看@wirey的评论

$(function() {
    $('div .ampm').val(function() {
                return $(this).prev('.hide').val();
            })
});

Answer 3

$(function () {
    $('div').each(function() {
        var $div = $(this);
        $div.find('.hide').change(function() {  //inputs change:
            var newInputVal = $(this).val();
            $div.find('.ampm').val(newInputVal);
        });
    });
});

注意组中的这种变化。然而，这是很多.ampm在父div中。不确定这是你的意图。有点晚了，但试图用初学者的变量说清楚。上面的下一个（）替代方案，在某些情况下可能有点脆弱。此外，我认为这有一些明显的问题，例如当模糊实际被解雇等时。

http://jsfiddle.net/LpsVn/

Answer 4

您正在迭代输入标记内的选择标记，这是不可能的，因为选择标记不是输入的子标记。所以你可以做的只是遍历输入标签，然后找到它的下一个兄弟选择标签，并为它分配当前输入标签的值。

$(function () {
$('div').find('input').each(function(){                
alert( $(this).val());
$(this).next('select').val($(this).val());
});
});

http://jsfiddle.net/LpsVn/8/

Answer 5

$("select option").filter(function() {
    return $(this).text() == text1; 
}).attr('selected', true);

过滤正确的选项并将selected属性设置为true。

JQuery：如何选择相同的类选项

5 个答案: