從select中獲取值並構建圖像url

我想從文本輸入和幾個選擇的drop-drowns中獲取值。這些將是客戶的選擇。然後，我想將這些值傳遞到URL中以便顯示圖像 - 理想情況下，客戶自行選擇，不提交按鈕。這是我到目前爲止有：從select中獲取值並構建圖像url

<input type="tex" maxlength="8" value="YOUR REG" id="txt" name=""/> 
<select id="1" name="1" > 
    <option value="1">text 1</option> 
    <option value="2">text 2</option> 
    <option value="3">text 3</option> 
    <option value="4">text 4</option> 
    <option value="5">text 5</option> 
    <option value="6">text 6</option> 
</select> 
<select id="2" name="2" > 
    <option value="1">text 1</option> 
    <option value="2">text 2</option> 
    <option value="3">text 3</option> 
    <option value="4">text 4</option> 
    <option value="5">text 5</option> 
    <option value="6">text 6</option> 
</select> 
<select id="3" name="3" > 
    <option value="1">text 1</option> 
    <option value="2">text 2</option> 
    <option value="3">text 3</option> 
    <option value="4">text 4</option> 
    <option value="5">text 5</option> 
    <option value="6">text 6</option> 
</select> 
<div id="pContainer"> 
    <img id="img" src="http://dir/dir/Default.aspx?1=&2=&3=" class="img-responsive "> 
</div> 
$(document).ready (function DrawImg() { 

    var txt = $("#txt").val(); 
    var 1 = $("#1").val; 
    var 2 = $("#2").val; 
    var 3 = $("#3").val; 


     var url = 'http://dir/dir/Default.aspx?'; 
     url += 'txt=' + escape(txt); 
     url += '&1=' + escape(1); 
     url += '&2=' + escape(2); 
     url += '&3=' + escape(3); 

     $("#pContainer").html("<img src='url'/>"); 
    } 
});

爲相對Ĵ查詢新人我只是似乎無法得到這個工作。請幫忙嗎？

來源

2013-11-01 Keith Whitwell

它看起來像你期望的圖像的URL生成每次用戶改變input文字和selects選項，所以：

// Just a shortcut for the document ready 
$(function() { 
    // On every change to the input or selects 
    $("input, select").on("change", function() { 
     var txt = $("#txt").val(); 
     var url = "http://dir/dir/Default.aspx?";   

     url += "txt=" + escape(txt); 

     // Loop through all the selects   
     $("select").each(function() { 
      url += "&" + $(this).attr("id") + "=" + escape($(this).val()); 
     }); 

     // Change the image source attribute 
     $("#img").attr("src", url); 
    }); 
});

演示：http://jsfiddle.net/67WaW/

我建議你在用戶實際完成選擇時生成圖像URL，因此：

// Just a shortcut for the document ready 
$(function() { 
    // When the user finishes the selection  
    $("select:last").on("change", function() { 
     var txt = $("#txt").val(); 
     var url = "http://dir/dir/Default.aspx?";   

     url += "txt=" + escape(txt); 

     // Loop through all the selects   
     $("select").each(function() { 
      url += "&" + $(this).attr("id") + "=" + escape($(this).val()); 
     }); 

     // Change the image source attribute 
     $("#img").attr("src", url); 
    }); 
});

演示：http://jsfiddle.net/67WaW/1/

這取決於你決定走哪條路。

來源

2013-11-01 09:42:51 melancia

謝謝。這似乎正是我需要的，而且寫得更簡潔。 –

不客氣。很高興我能幫上忙。 – melancia

$(document).ready (function(){ 
DrawImg(); 
}); 

function DrawImg() { 

    var txt = $("#txt").val(); 
    var test1 = $("#1").val();// variable name must be valid 
    var test2 = $("#2").val(); 
    var test3 = $("#3").val(); 


     var url = 'http://dir/dir/Default.aspx?'; 
     url += 'txt=' + escape(txt); 
     url += '&1=' + escape(test1); 
     url += '&2=' + escape(test2); 
     url += '&3=' + escape(test3); 

     $("#pContainer").html("<img src='"+url+"'/>"); 
    }

看到demo

來源

2013-11-01 09:34:06

改變你的jQuery代碼到這一點。

$(document).ready (function() { 
DrawImg(); 
}); 
function DrawImg() { 
var txt = $("#txt").val(); 
var t1 = $("#1 option:selected").val; 
var t2 = $("#2 option:selected").val; 
var t3 = $("#3 option:selected").val; 
var url = 'http://dir/dir/Default.aspx?'; 
url += 'txt=' + escape(txt); 
url += '&1=' + escape(1); 
url += '&2=' + escape(2); 
url += '&3=' + escape(3); 
alert(' 
<img src='+url+'/> 
'); 
$("#pContainer").html(' 
<img src='+url+'/> 
'); 
}

來源

2013-11-01 09:34:10

在你的代碼中，URL是一個變量，所以用'+'運算符連接字符串變量。

來源

2013-11-01 09:37:45 RiderHood

從select中獲取值並構建圖像url

回答

相關問題