0

我的 html 有多个具有相同类的下拉框。我从每个输入框中获取一个值，然后将其<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 完整代码

4

5 回答 5

8

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

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

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

于 2013-03-06T04:21:44.480 回答
2

试试这个

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

演示：小提琴。

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

$(function() {
    $('div .ampm').val(function() {
                return $(this).prev('.hide').val();
            })
});
于 2013-03-06T04:23:36.737 回答
0 
$(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 中。不确定那是您的意图。这有点晚了，但试图让初学者清楚地了解变量。上面的 next() 替代方案在某些情况下可能有点脆弱。另外，我认为这通常有一些明显的问题，比如当模糊实际被触发时等。

http://jsfiddle.net/LpsVn/

于 2013-03-06T04:50:07.330 回答
0

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

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

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

于 2013-03-06T16:22:03.183 回答
-1 
$("select option").filter(function() {
    return $(this).text() == text1; 
}).attr('selected', true);

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

于 2013-03-06T04:23:53.570 回答