选择当前选择框

Question

我用selectboxes和div按钮创建了一个基本的定价计算器。问题是，当我点击按钮时，它会选择我代码中的所有选择框。我只需要指定一个，我最近点击了。

$(".prev").click(function() {
    $('.val option:selected').prev().attr('selected', 'selected');
});

$(".next").click(function() {
    $('.val option:selected').next().attr('selected', 'selected');
});

.prev, .next {
    width: 20px;
    height: 20px;
    background-color: #6c6c6c;
    display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="calc">
        <div class="selector">
            <div class="prev"></div>
            <select class="val">
                <option selected>1</option>
                <option>2</option>
                <option>4</option>
                <option>6</option>
            </select>
            <div class="next"></div>
        </div>
        <div class="selector">
            <div class="prev"></div>
            <select class="val">
                <option selected>2</option>
                <option>4</option>
                <option>8</option>
                <option>16</option>
                <option>32</option>
            </select>
            <div class="next"></div>
        </div>
        <div class="selector">
            <div class="prev"></div>
            <select class="val">
                <option selected>0</option>
                <option>50</option>
                <option>100</option>
            </select>
            <div class="next"></div>
        </div>
        <div class="selector">
            <div class="prev"></div>
            <select class="val">
                <option selected>0</option>
                <option>50</option>
                <option>100</option>
                <option>200</option>
            </select>
            <div class="next"></div>
        </div>
        <div class="selector">
            <div class="prev"></div>
            <select class="val">
                <option selected>0</option>
                <option>200</option>
                <option>500</option>
                <option>1000</option>
            </select>
            <div class="next"></div>
        </div>
        <div class="selector">
            <div class="prev"></div>
            <select class="val">
                <option selected>Linux</option>
                <option>Windows</option>
            </select>
            <div class="next"></div>
        </div>
    </div>

Answer 1

1. 使用$(this)点击<div>。

2. 使用.siblings('select')或.siblings('.val')获取select。

3. 使用.find('option:selected').next()/.prev()获取下一个/上一个选项。

4. 使用.prop('selected', true)选择它。

$(".prev").click(function() {
  $(this).siblings('select').find('option:selected').prev().prop('selected', true);
});

$(".next").click(function() {
    $(this).siblings('select').find('option:selected').next().prop('selected', true);
});

.prev, .next {
    width: 20px;
    height: 20px;
    background-color: #6c6c6c;
    display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="calc">
        <div class="selector">
            <div class="prev"></div>
            <select class="val">
                <option selected>1</option>
                <option>2</option>
                <option>4</option>
                <option>6</option>
            </select>
            <div class="next"></div>
        </div>
        <div class="selector">
            <div class="prev"></div>
            <select class="val">
                <option selected>2</option>
                <option>4</option>
                <option>8</option>
                <option>16</option>
                <option>32</option>
            </select>
            <div class="next"></div>
        </div>
        <div class="selector">
            <div class="prev"></div>
            <select class="val">
                <option selected>0</option>
                <option>50</option>
                <option>100</option>
            </select>
            <div class="next"></div>
        </div>
        <div class="selector">
            <div class="prev"></div>
            <select class="val">
                <option selected>0</option>
                <option>50</option>
                <option>100</option>
                <option>200</option>
            </select>
            <div class="next"></div>
        </div>
        <div class="selector">
            <div class="prev"></div>
            <select class="val">
                <option selected>0</option>
                <option>200</option>
                <option>500</option>
                <option>1000</option>
            </select>
            <div class="next"></div>
        </div>
        <div class="selector">
            <div class="prev"></div>
            <select class="val">
                <option selected>Linux</option>
                <option>Windows</option>
            </select>
            <div class="next"></div>
        </div>
    </div>

Answer 2

我认为您可以使用this

$(".prev").click(function() {
  $(this).find(".val option:selected").prev().attr('selected', 'selected');
});