2016-07-29 42 views
0

我有一個頁面,用戶必須通過選擇選項選擇3件東西。首先,用戶選擇一種顏色,接下來是一個字,最後是一個數字。Javascript - 更改選擇框更新字符串的值只有一次

<select name="color" id="color" size="3"> 
    <option value="red">red</option> 
    <option value="blue">blue</option> 
    <option value="green">green</option> 
</select> 
<select name="cos" id="cos" size="3"> 
    <option value="-moon">Moon</option> 
    <option value="-star">Star</option> 
    <option value="-sun">Sun</option> 
</select> 
<select name="year" id="year" size="3"> 
    <option value="-2000">2000</option> 
    <option value="-3000">3000</option> 
    <option value="-4000">4000</option> 
</select> 
<div id="output" class="button"></div> 

這些選項我使用的爲「海峽」的一個URL,其中獲得在#output DIV輸出值的:

var selectedAllLength = $("select").length; 
$("select").change(function() { 
     var str = location.origin; 
     var selected = $("select option:selected"); 
     var selectedCount = selected.length; 
     if (selectedCount == selectedAllLength) { 
      selected.each(
       function() { 
        str += $(this).attr('value'); 
       } 
      ); 
      $("#output").html('<a href=' + str + '>GO!</a>'); 
     } 
    }) 
    .on('change.select2'); 

如果用戶選擇在第一時間,它的工作原理。通過選擇/選項更改了一些變量後,'str'被更新爲正確的值。唯一不起作用的是當用戶選擇他以前已經選擇的東西時。如果他這樣做,'str'不會更新。

例如,用戶選擇Blue,Moon,2000,'str'輸出如blue-moon-2000。如果用戶切換到紅色,Moon,2000 ..'str'更新爲red-moon-2000。到現在爲止還挺好。如果他再改變主意並再次選擇藍色,那麼'str'仍然爲red-moon-2000

有沒有人有一個想法是什麼會導致這種情況?以及如何解決它?

+0

你檢查你的瀏覽器控制檯對任何錯誤報告? – NewToJS

+0

是的,它沒有錯誤 – paaater

回答

0

JSFiddle無法複製此問題。唯一的區別是我可以想象的是你正在運行的jQuery版本,或者是來自其他js文件的衝突。

https://jsfiddle.net/29Lajogk/

我認爲沒有錯你

var selectedAllLength = $("select").length; 
$("select").change(function() { 
    var str = location.origin; 
    var selected = $("select option:selected"); 
    var selectedCount = selected.length; 
    if(selectedCount == selectedAllLength) { 
     selected.each(
     function() { 
      str += $(this).attr('value');    
     } 
     ); 
     $("#output").html('<a href=' + str + '>GO!</a>'); 
    } 
}) 
.on('change.select2'); 
+1

嗯,我實際上使用圖像做出選擇..實際選擇框被隱藏,並且點擊相應的圖像設置正確的選項值。這也是通過javascipt完成的,所以我想問題出在這裏。 – paaater