讓div出現在動態選項選擇

我有一個SELECT輸入，通過數據庫獲取其所有選項。在選擇輸入下面，爲選擇中的每個選項創建了div。我希望用戶從下拉菜單中選擇一個選項，並將div顯示在下面。所以基本上下拉的運動，如果他們做出選擇這項運動的div下面隱藏將加載，該分區將包含所有的運動位置讓div出現在動態選項選擇

<select name="sport" id="select"> 
    <? 
    foreach ($getSports as $row) { 
     echo '<option onClick="toggle'.$row['1'].'()" onLoad="toggle'.$row['1'].'()" value="' . $row['0'] . '">' . $row['1'] . '</option>'; 
    } 
    ?> 

       </select> 
      </label> 
      <? 
    foreach ($getSports as $row) { 
     echo '<div id="position' . $row['1'].'" style="margin-top: 5px;display:none;">Positions:' . $row['1'].''; 
     $sport = $row['0']; 
      $getPositions = $model->getPositions($sport); 
      foreach ($getPositions as $row2) { 
       echo '<label style="float:right">'.$row2['1'].'</label>'; 
       echo '<input type="checkbox" name="'.$row2['1'].'" value="'.$row2['0'].'">'; 
      } 

     echo '</div>'; 
    } 
    ?>

來源

2011-05-27 MSD

如何修改你的代碼？似乎更多的語義：

<select name="sport" id="select"> 
    <? foreach ($getSports as $row) { 
     echo '<option data-row-id="'.$row['1'].'" value="'.$row['0'].'">'.$row['1'].'</option>'; 
    } ?> 
    </select> 
</label> 

<? foreach ($getSports as $row) { 
    echo '<div data-position="'.$row['1'].'" style="margin-top:5px;display:none;">Positions:' . $row['1'].''; 
     $sport = $row['0']; 
     $getPositions = $model->getPositions($sport); 
     foreach ($getPositions as $row2) { 
      echo '<label style="float:right">'.$row2['1'].'</label>'; 
      echo '<input type="checkbox" name="'.$row2['1'].'" value="'.$row2['0'].'">'; 
     } 

    echo '</div>'; 
}?> 


<script> 
$(function() {//create the binding once the document is ready 
    $('#select').change(function() { 
     var select = $(this); 
     var selectedOption = select.find(':selected'); 
     var position = selectedOption.attr('data-row-id'); 
     var divContext = $('[data-position="'+position+'"]'); 

     $('[data-position]').not(divContext).hide(); 
     divContext.show(); 
    }); 
}); 
</script>

來源

2011-05-27 00:50:53 Eli

如果有一個onClick或在的onLoad的選項？我試過你的代碼，什麼也沒有發生，我很好奇它是如何觸發的 – MSD 2011-05-27 01:07:27

一旦你改變選擇到不同的選項，代碼應該觸發。根據您包含腳本的位置，您可能需要將其放在文檔就緒函數中，以便在DOM元素可用時進行綁定。我將更新代碼並將其放置在文檔中，以便您可以看到它是如何使用的。 – Eli 2011-05-27 01:09:30

它也取決於您使用的jQuery版本;你使用什麼版本？ – Eli 2011-05-27 01:11:20

如果你想保持可見只對選定的運動，我建議這個。

（1）向保存體育信息的div添加一個類 - 例如： class="sportsHolder"

（2）該部分

onClick="toggle'.$row['1'].'()" onLoad="toggle'.$row['1'].'()"

改變

onClick="toggle('.$row['1'].');" onLoad="toggle('.$row['1'].');"

（3）創建函數

<script type="text/javascript"> 
    function toggle(whichPos) { 
     $(".sportsHolder").hide(); 
     $("#position" + whichPos).show(); 
    } 
</script>

至少我會那樣做。

來源

2011-05-27 00:40:12 RRStoyanov

讓div出現在動態選項選擇

回答

相關問題