2

ユーザーがドロップダウンボックスから選択する必要があるフォームがあります。ユーザーが選択すると、ページ上部のロゴが選択内容に合わせて変更されます。ここにjsfiddleがあります。だから私の問題はこれです、ドロップダウンボックスの選択の名前をmysqlに投稿できるようにしたいのですが、値がjavascriptによってすでに使用されているため、dbに投稿するすべての画像が変更されますボックス内の値ではなく、画像の名前。

私がやりたいことは、ドロップダウンボックスを使用して画像を変更する代わりに、チェックボックスを使用して同じことを達成するにはどうすればよいですか? 選択が行われるまで常にフォームに表示されるデフォルトのロゴがあるので、それもそのままにしておく必要があります。

ここにjsfiddleのコードがあります 

<br/><br/>

<select id="dd" onChange="swapImage()" style="width: 150px">
<option value=""></option>
<option value="http://xxxs.com/demo1/decals/falcons2013.jpg">Falcons</option>
<option value="http://xxxxx.com/demo1/decals/gvklogo2013.png">Green Valley   Knights</option>
<option value="http://xxxxx.com/demo1/decals/longhorns2013.jpg">Longhorns</option>
</body>
</html>

そしてジャバスクリプト

function swapImage(){
var image = document.getElementById("logoimage");
var dropd = document.getElementById("dd");
image.src = dropd.value;    
};
4

1 に答える 1

3

チェックボックスをラジオグループのように機能させない限り、チェックボックスを使用するのは少し難しいと思います。選択を維持したい場合は、 img src をに配置してtitle、値を使用できるようにすることができます -

<select id="dd" onChange="swapImage()" style="width: 150px">
    <option value=""></option>
    <option value="Falcons" title="http://xxxxx.com/demo1/decals/falcons2013.jpg" >Falcons</option>
    <option value="Green Valley Knights" title="http://xxxxx.com/demo1/decals/gvklogo2013.png">Green Valley Knights</option>
    <option value="Longhorns" title="http://xxxxx.com/demo1/decals/longhorns2013.jpg">Longhorns</option>
</select>

次に、js で、選択したオプションのタイトルを取得します -

function swapImage(){
var image = document.getElementById("logoimage");
var dropd = document.getElementById("dd");
image.src = dropd.options[dropd.selectedIndex].title;   
};

この更新された jsFiddle の例を参照してください - http://jsfiddle.net/UtcTc/

edit
選択した img src を保存したい場合は、select のすぐ下に隠し要素を作成することをお勧めします

<input type="hidden" name="img_url" id="img_url" />

次に、に変更swapImage()します

function swapImage(){
    var image = document.getElementById("logoimage");
    var dropd = document.getElementById("dd");
    image.src = dropd.options[dropd.selectedIndex].title;
    document.getElementById("img_url").value = dropd.options[dropd.selectedIndex].title;    
};

その後、フォームポストでキャプチャできます-

$img_url = $_POST['img_url']
于 2013-07-06T01:20:39.117 に答える