Mam kilka wybranych pudełek pozwalających użytkownikom wprowadzić czasy, które przekazuję na kolejną stronę z:

<p class="apptmar">
    <label for="from">Appointment Starts:</label><br />
    <input type="text" name="from" id="from" class="appt" /><br />
    <select name="fromh" class="apptselect">
        <option>1</option>
        ...
        <option>12</option>
    </select>
    <select name="fromm" class="apptselect">
        <option>00</option>
        <option>05</option>
        ...
        <option>55</option>
    </select>
    <select name="froma" class="apptselect">
        <option>AM</option>
        <option>PM</option>
    </select>
</p>
<p class="apptmar">
    <label for="to">Appointment Ends:</label><br />
    <input type="text" name="to" id="to" class="appt" /><br />
    <select name="toh" class="apptselect">
        <option>1</option>
        ...
        <option>12</option>
    </select>
    <select name="tom" class="apptselect">
        <option>00</option>
        ..
        <option>55</option>
    </select>
    <select name="toa" class="apptselect">
        <option>AM</option>
        <option>PM</option>
    </select>
</p>

Chcę to zrobić, to, że wtedy, gdy pudełko pod "spotkanie z" jest zmieniane wartość jednego "umówienia się do" do zmiany na ten sam. Udało mi się wykonać to przy użyciu:

$('select[name="fromh"]').change( function() {
    $('select[name="toh"]').val($(this).val());
});

Działa to zgodnie z oczekiwaniami. Teraz chcę zmienić minuty, ale zamiast go zmieniają się na tę samą wartość, którą chciałbym przejść do następnego. Dawny. Wybieram 05 osób poniżej, poniżej, zostanie wybrany. Próbowałem użyć następujących, ale nie działa:

$('select[name="fromm"]').change( function() {
    $('select[name="tom"]').val($(this).val() + 1);
});
4
Meisam Mulla 8 grudzień 2011, 01:06

3 odpowiedzi

Najlepsza odpowiedź

Użyłbym jQuery's Filter, który ma przeciążenie, które akceptuje funkcję.

$('select[name="fromm"]').change( function() {
    var $that = $(this);

    var $targetNode = $('option', 'select[name="tom"]').filter(function() {
        return $(this).text() === $that.val();
    }).next();
    $('select[name="tom"]').val($targetNode.text());
});

Lub być naprawdę bezpiecznym:

$('select[name="fromm"]').change( function() {
    var $that = $(this);

    var $targetNode = $('option', 'select[name="tom"]').filter(function() {
        return $(this).text() === $that.val();
    }).next();

    if ($targetNode.length === 1)
        $('select[name="tom"]').val($targetNode.text());
});
5
Adam Rackis 7 grudzień 2011, 22:11

Nie jestem ekspertem, prawie nie wiem, co robię, ale nie miałoby też tej pracy?

$('select[name="fromm"]').change( function() {
    $('select[name="tom"]').val($(this).next().val());
});

Może potrzebujesz trochę logiki, aby zobaczyć, czy jest następny?

0
Dale 7 grudzień 2011, 21:23

Możesz uzyskać wybrany indeks w bieżącym {x0}}, a następnie uzyskaj wartość następnej opcji. Uchyl się do zera, jeśli użytkownik wybrany "55":

$('select[name="fromm"]').change(function() {
    var index = (this.options.selectedIndex+1)%this.options.length;
    $('select[name="tom"]').val(this.options[index].value);
});

Jsfiddle: http://jsfiddle.net/ezbng/1

0
Dennis 8 grudzień 2011, 21:16