0

次のリンクとドロップダウンがあるとします。

<a href="#contact">Send a mail to mother!</a>
<a href="#contact">Send a mail to father!</a>
<a href="#contact">Send a mail to sister!</a>
<a href="#contact">Send a mail to brother!</a>

<form id="contact">
    <select id="recipient">
        <option value="mother@mail.com">Mother</option>
        <option value="father@mail.com">Father</option>
        <option value="sister@mail.com">Sister</option>
        <option value="brother@mail.com">Brother</option>
    </select>
</form>

基本的に、各リンクをそれぞれの選択オプションに変更したいと考えています。

状況を説明するために、現在、ページの最後にフォームがあり、最初にいくつかの電子メール リンクがあります。誰かがリンクをクリックすると、フォームにスクロール (アンカー) されます。フォームには、受信者を選択するためのドロップダウンがあります。フォームまでスクロールするだけでなく (これは既に行われています)、クリックされたリンクに基づいてオプションを自動的に変更したいと考えています。

どうすればこれを達成できますか？

4

3 に答える 3

5

data-selectこれらのリンクに属性を追加します。

<a href="#contact" data-select="mother@mail.com">Send a mail to mother!</a>
<a href="#contact" data-select="father@mail.com">Send a mail to father!</a>
<a href="#contact" data-select="sister@mail.com">Send a mail to sister!</a>
<a href="#contact" data-select="brother@mail.com">Send a mail to brother!</a>

次に、クリックしたリンクの値を使用してselect要素の値を設定します。

var $select = $('#recipient');
$('a[href="#contact"]').click(function () {
    $select.val( $(this).data('select') );
});

これがフィドルです：http://jsfiddle.net/Dw6Yv/

これらの属性をマークアップに追加したくない場合はdata-select、これを使用できます。

var $select = $('#recipient'),
    $links = $('a[href="#contact"]');

$links.click(function () {
    $select.prop('selectedIndex', $links.index(this) );
});

これがフィドルです：http://jsfiddle.net/Bxz24/

selectこれには、リンクをオプションとまったく同じ順序にする必要があることに注意してください.

于 2013-02-06T19:53:14.897 に答える
3

順序が常に同じである場合は、これを行うことができます

$("a").click(function(){
    $("#recipient").prop("selectedIndex", $(this).index());
});

それ以外の場合は、リンクにインデックスを定義してこれを行います。

<a href="#contact" data-index="0">Send a mail to mother!</a>
<a href="#contact" data-index="1">Send a mail to father!</a>
<a href="#contact" data-index="2">Send a mail to sister!</a>
<a href="#contact" data-index="3">Send a mail to brother!</a>

<form id="contact">
    <select id="recipient">
        <option value="mother@mail.com">Mother</option>
        <option value="father@mail.com">Father</option>
        <option value="sister@mail.com">Sister</option>
        <option value="brother@mail.com">Brother</option>
    </select>
</form>

$("a").click(function(){
    $("#recipient").prop("selectedIndex", $(this).data("index"));
});
于 2013-02-06T19:50:28.417 に答える
1

また、オプションを使用する別の方法labelもあります。これは、 html5 がなくても機能することを確認していますdata。

于 2013-02-06T20:00:53.033 に答える