选择“选择”时显示文本

时间:2014-11-14 16:46:59

标签: magento dynamic prototypejs

我有一个包含select,radio和checkbox选项的表单。 PHP构建了分配给它们的选项和指示符的数组。选择该选项后,如何显示每个选项的指示符?

选择和选项代码:

<select onchange="bundle.changeSelection(this)" id="option-1" name="bundle_option_1" class="option-1">
    <option value="1">Option1</option>
</select>
<ul class="options-list">
    <li><input type="radio" onclick="bundle.changeSelection(this)" class="radio" id="bundle-option-2-select-2" name="bundle_option_2" value="2"/></li>
</ul>
<ul class="options-list">
    <li><input type="checkbox" onclick="bundle.changeSelection(this)" class="checkbox" id="bundle-option-3-select-3" name="bundle_option_3" value="3"></li>
</ul>

生成的数组:

Array ( [0] => Designator1 [1] => Designator2 [2] => Designator3 [3] => Designator4 [4] => Designator5 )

Div for display:

<div class="configuration" id="designator"></div>

谢谢。

1 个答案:

答案 0 :(得分:0)

我不知道magento,但这似乎只需要一个JavaScript(原型ProtypJS)解决方案,所以试试这个:

<script>
document.observe('dom:loaded', function() {
    $$('[name^=bundle_option]').invoke('observe','click',function(e) {
         var el=e.element(),
             output=$('designator');
         if(el.nodeName=='SELECT') {
            output.innerHTML=el.options[el.selectedIndex].text;
         }
         else if(el.nodeName=='INPUT' && (el.type=='checkbox' || el.type=='radio')) {

            //- just puts in the value, prob not what you want 
            //output.innerHTML = el.value;

            //- or if theres a label something like 
            //- (COMPLETE GUESS as dont have the HTML)
            //- find the label for the input
            var label = el.up().select('label')[0];

            //- grab its text content and put in the output div
            if(label) output.innerHTML = label.textContent || label.innerText;
         }
    });
});
</script>

将此代码放在某处的页面上,我无法对此进行测试,请让我知道它是否适合您,以及是否有效!