javascript 在 magento 的可配置下拉菜单上设置默认值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24933460/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set default value on configurable drop down in magento
提问by dan_code89
I have a Configurable Product with 3 Options - here is what the drop down menu looks like on the product page.
我有一个带有 3 个选项的可配置产品 - 这是产品页面上的下拉菜单的样子。
Bundle Deals
* Required Fields
Choose an Option...
- Single Product ￡10
- 5 Product Bundle ￡50
- 10 Product Bundle ￡100
Default value on page load is ￡10.00but if I hit add to cart it flags up with - * Required Fields& user is prompted to select an option from the drop down.
页面加载的默认值是，￡10.00但如果我点击添加到购物车，它会用 - * Required Fields& 提示用户从下拉列表中选择一个选项。
By default I would like the drop down menu to load with - Single Product ￡10as the default value.
默认情况下，我希望下拉菜单加载 -Single Product ￡10作为默认值。
Hope that all makes sense? I can't find this functionality in the Magento version 1.9 CE, which I am using
希望一切都有意义？我在我使用的 Magento 1.9 CE 版中找不到这个功能
FINAL EDIT >>thanks to everyone for helping - got a fix - Very glad! visit link.. similar to a suggestion here but something in the code seemed to work for me
最终编辑 >>感谢大家的帮助 - 得到了修复 - 非常高兴！访问链接..类似于此处的建议，但代码中的某些内容似乎对我有用
http://iamvikram.com/magento-remove-choose-an-option-from-configurable-products-dropdown/
http://iamvikram.com/magento-remove-choose-an-option-from-configurable-products-dropdown/
A thank you msg has been mailed :)
一封感谢信已寄出:)
回答by TBI
Navigate to Catalog->Attributes->Manage Attributesin your magento admin and search for your attribute.
导航到Catalog->Attributes->Manage Attributes您的 magento 管理员并搜索您的属性。
Click to edit and select Noto Values required.
点击编辑，并选择No到Values required.
Hope it will work.
希望它会起作用。
JQuery to default select first value is -
JQuery 默认选择第一个值是 -
jQuery('#attribute135>option:eq(1)').attr('selected', true);
回答by Slimshadddyyy
Copy below file in your local
将以下文件复制到本地
/app/design/frontend/default/mytheme/template/catalog/product/view/type/options/configurable.phtml
<select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select">
<option><?php echo $this->__('Choose an Option...') ?></option>
</select>
It shows 'Choose an Option...' as a default value
它显示 ' Choose an Option...' 作为默认值
You can change it like below to simply select the first real element in your select:
您可以像下面那样更改它以简单地选择选择中的第一个真实元素：
$$('#attribute525 option')[1].selected = true;
Check with your attributeid. The above is just an example.
检查您的attributeid。以上只是一个例子。
回答by William Tran
This could get tricky if you have 2+ options (it's confusing but what you describe above is 1 option with 3 selection), says Color and Size. Assuming Color is the first Option, Size's selection will be updated once Color is selected.
如果您有 2 个以上的选项，这可能会变得棘手（这很令人困惑，但您在上面描述的是 1 个选项和 3 个选项），颜色和尺寸说。假设颜色是第一个选项，一旦选择了颜色，尺寸的选择就会更新。
For example, you have a shirt available in Red in size (S,L) and Blue in size (M,L), once you select Blue, Magento observe the event 'onChange' of the Color option and update the Size option to M, L.
例如，您有一件红色 (S,L) 和蓝色 (M,L) 的衬衫，一旦您选择蓝色，Magento 就会观察颜色选项的“onChange”事件并将尺寸选项更新为 M ，L。
This is what I would do to get it done correctly in PrototypeJS:
这是我在 PrototypeJS 中正确完成它会做的事情：
<script type='text/javascript>
var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
document.observe('dom:loaded', function() {
var el = $('attribute<?php echo $_attribute->getAttributeId() ?>');
el.selectedIndex = 1;
el[0].remove();
if ("createEvent" in document) {
var ev = document.createEvent("HTMLEvents");
ev.initEvent("change", false, true);
el.dispatchEvent(ev);
} else {
el.fireEvent("onchange");
}
</script>
in configurable.phtml, please note the fireEvent / dispatchEvent.
el[0].remove will get rid of "Select an option.."
在configurable.phtml，请注意fireEvent/dispatchEvent。el[0].remove 将摆脱“选择一个选项..”
This is the least intrusive method that I know of
这是我所知道的侵入性最小的方法
回答by Niraj Pathak
Open app\design\frontend\[your package]\[your theme]\template\catalog\product\view\type\options\configurable.phtml
Now add the below java-script code after :-
现在添加以下java脚本代码：-
var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
function fireEvent(element,event){
if (document.createEventObject){
// dispatch for IE
var evt = document.createEventObject();
return element.fireEvent('on'+event,evt)
}
else{
// dispatch for firefox + others
var evt = document.createEvent("HTMLEvents");
evt.initEvent(event, true, true ); // event type,bubbling,cancelable
return !element.dispatchEvent(evt);
}
}
Event.observe(window, 'load', function() {
spConfig.settings[0].selectedIndex = 1;
obj = spConfig.settings[0]; // this grabs the first select item
Event.observe(obj,'change',function(){});
fireEvent(obj,'change'); // this simulates selecting the first option, which triggers
spConfig.settings[1].selectedIndex = 1; // this selects the first option of the second attribute drop menu
});
