Html MooTools - 如何使用 getSelected()

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3340459/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 03:54:30  来源:igfitidea点击:

MooTools - How to use getSelected()

htmlhtml-selectmootoolsforms

提问by tranquil.meadows

I'm trying to learn MooTools and am a TOTAL javascript noobie so please be gentle with me.

我正在尝试学习 MooTools 并且我是一个完全的 javascript noobie,所以请对我温柔。

What I'm tying to do is to change the state of a disabled input field (type is text) when a particular option is selected. The html looks a bit like tis:

我要做的是在选择特定选项时更改禁用输入字段(类型为文本)的状态。html 看起来有点像 tis:

<select class="wide" id="selectBox" name="option> 
  <optgroup label="Common">
      <option value="one">One<option>
      <option value="two">Two<option>
      <option value="three">Three<option>
  </optgroup>
  <optgroup label="Less Common">
      <option value="other">Other<option>
  </optgroup>
</select>
<input id="other" type="text" disabled="disabled" />

This is what I was HOPING would give me the value to be checked in an if statement that would then change the input disabled to enabled:

这就是我所希望的,它会给我一个 if 语句中要检查的值,然后将禁用的输入更改为启用:

window.addEvent('domready', function(){
 $$('#selectBox').addEvent('change',function(){
  var selection = $$('#selectBox').getSelected();
  alert(selection);
   });
});

When the code us run (i.e. I select another value in the option box) all I get is [object HTMLOptionElement].

当我们运行代码时(即我在选项框中选择另一个值),我得到的只是[object HTMLOptionElement].

The documentation on mootools for this method is SPARSE and only says:

这种方法的 mootools 文档是稀疏的,只说:

Element Method: getSelected

Returns the selected options of a select element.

元素方法:getSelected

返回选择元素的选定选项。

Returns:

* (array) An array of the selected elements.

Examples: HTML

示例:HTML

<select id="country-select" name="country">
    <option value="US">United States</option
    <option value ="IT">Italy</option>
</select>

JavaScript

JavaScript

$('country-select').getSelected(); //Returns whatever the user selected.

Note:

笔记:

This method returns an array, regardless of the multiple attribute of the select element. If the select is single, it will return an array with only one item.

无论 select 元素的 multiple 属性如何,此方法都会返回一个数组。如果选择是单一的,它将返回一个只有一项的数组。

Totally confusing!

完全混乱!

Someone please tell me what I'm missing. I've also tried:

有人请告诉我我错过了什么。我也试过:

var selection = $$('#selectBox').getSelected().value; //and
var selection = $$('#selectBox').getSelected('value'); //and
//a WHOLE bunch of other wild ideas including
var selection = $$('#selectBox').getSelected();
alert(selection[0]);

Nothing comes out properly. In some cases I get undefinedand in other cases I get the same [object HTMLOptionElement].

什么都没有正确地出来。在某些情况下我得到undefined,在其他情况下我得到相同的[object HTMLOptionElement].

回答by Dimitar Christoff

so many things wrong, not sure where to begin.

错的太多,不知从何说起。

$$()is a collection operator (alias for document.getElements()which returns multiples based upon a selector) - not appropriate to use for an id.

$$()是一个集合运算符(document.getElements()根据选择器返回倍数的别名) - 不适合用于 id。

you want document.id("idhere")or $("idhere")

你想要document.id("idhere")$("idhere")

for mootools 1.2+

用于 mootools 1.2+

document.id('selectBox').addEvent('change',function() {
    alert(this.get("value")); // get value
    alert(this.getSelected().get("value")); // gets the option that's selected and then it's value
});

make sure you check your markup - you don't close the options, you have a missing " from name="option> as well.

确保你检查你的标记——你没有关闭选项,你还有一个 " from name="option> 。

getSelected is there as a method as some selects use multiple selection so doing selectEl.get("value") will not report anything meaningful. any other case, .get("value") is fine.

getSelected 是一种方法,因为某些选择使用多项选择,因此执行 selectEl.get("value") 不会报告任何有意义的内容。任何其他情况, .get("value") 都可以。

check it working: http://www.jsfiddle.net/dimitar/SmShF/

检查它是否工作:http: //www.jsfiddle.net/dimitar/SmShF/

have fun and read the manual :)

玩得开心并阅读手册:)

回答by Salman

late reply but I was facing the same issue and solved it in this (simple) way in Mootools:

迟到的回复,但我遇到了同样的问题,并在 Mootools 中以这种(简单)方式解决了它:

$('selectBox').getSelected().get('text')

回答by Vincent McNabb

So Complex!

好复杂!

You don't need to do such a complex thing, this would suffice:

你不需要做这么复杂的事情,这就足够了:

var selection = document.getElementById("selectBox").value;
alert(selection);

That should get you the selected text.

这应该让你选择的文本。

But if you wanted to use mootools, I guessthat this would work (I'm not going to try it)

但是如果你想使用 mootools,我这会奏效(我不打算尝试)

var selection = $('selectBox').getSelected();
alert(selection[0].value);


Also this has some problems:

这也有一些问题:

<select class="wide" id="selectBox" name="option> 

You don't need the nameattribute, as it is basically the same as id. Also if you do have both, then they should probably be the same. I.e. id="selectBox"and name="selectBox

您不需要该name属性,因为它与id. 此外,如果您确实拥有两者,那么它们应该是相同的。即id="selectBox"name="selectBox

Your nametag should be closed.

您的name标签应该关闭。

Also in your sample, you had a lot of <option>...<option>which should be <option>...</option>

同样在你的样本中,你有很多<option>...<option>应该是<option>...</option>

回答by Idealmind

All you need to do is:

您需要做的就是:

$('country-select').getSelected().get('value')[0];

回答by f.ardelian

Quick, hackish way:

快速,骇人的方式:

alert($('selectBox').value)

Verbose, recommended way:

详细,推荐方式:

var selectBox = document.id('selectBox');
alert(selectBox.get('value'));

回答by forestk

.getSelected() returns an array. See the docs: http://mootools.net/docs/core/Element/Element#Element:getSelected. My Code is :

.getSelected() 返回一个数组。请参阅文档:http://mootools.net/docs/core/Element/Element#Element: getSelected。我的代码是:

var $obj=$$('#id').getSelected()[0];
alert( $obj.get('text') );
alert( $obj.get('value') );