动态更改段落<p>的语言?

时间:2015-12-26 11:48:30

标签: javascript jquery html css

是否可以使用JQuery从<p>下拉列表中动态选择所需的语言来更改段落<select>标记内的内容语言?此外,该段落包含contenteditable="true"以允许编辑所需的语言。

JSFiddle

因此,我创造了一个小提琴,以便更好地理解我想要解决的问题。如果可以提供更新的小提琴,我将非常感激,因为我还不熟悉编码。

谢谢!

HTML:

 <select>
    <option disabled selected>
        Change Language of Text
    </option>
    <option>
        English [Default]
    </option>
    <option>
        Chinese
    </option>
    <option>
        Japanese
    </option>
    <option>
        French
    </option>
    <option>
        Spanish
    </option>
</select>
<hr>
<h4><b>Change below text to language from dropdown list
dynamically:</b></h4>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus
nulla velit, eget mattis ligula lobortis consectetur. Aenean dictum libero
vel augue faucibus, nec sodales enim ultricies. Cras sollicitudin volutpat
ante sed sollicitudin. Nam id dui molestie, ultricies ipsum sed, finibus
justo. Aenean elementum tristique mauris, vel posuere mauris hendrerit sit
amet. Donec ornare justo nec lectus lobortis efficitur. Integer suscipit
erat a sagittis pretium. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos himenaeos. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Donec
tortor justo, gravida eget erat ut, imperdiet mattis ligula. Suspendisse
potenti. Vestibulum dapibus turpis non sem blandit rutrum. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Duis nec sem dui. Mauris placerat sed risus vel semper. Cras auctor commodo
erat, non iaculis tellus dapibus vel. Aliquam eu tellus arcu. Vivamus
ullamcorper dapibus urna. Ut justo turpis, pulvinar nec venenatis ut,
pharetra non risus. Morbi dictum turpis id porta malesuada. Morbi nec ante
sit amet est suscipit viverra sit amet ac justo. Curabitur accumsan lorem
vel vestibulum tempor. Suspendisse ultricies justo velit, aliquam posuere
nisl blandit eget. Etiam eget sapien pharetra, porta nunc et, laoreet
risus. Integer mattis justo ut nibh condimentum ultricies. Quisque euismod
neque vel dictum facilisis. Vestibulum nisl nibh, placerat a sapien at,
dignissim tincidunt velit. Curabitur luctus, velit viverra scelerisque
aliquam, risus ante eleifend neque, at dictum quam nisi scelerisque turpis.
In vitae tincidunt lectus. Aliquam ultrices ultrices dapibus. Vivamus
interdum fringilla ipsum in faucibus. In tempor congue nisi, eu faucibus mi
faucibus quis. Nam suscipit gravida nisi id laoreet. Sed id euismod tellus.
Cras ac imperdiet turpis. Vivamus et ligula luctus, vestibulum mi eget,
cursus odio. Aenean est tellus, consequat id dolor in, bibendum suscipit
lacus. Vestibulum a justo at tortor tincidunt sodales. Donec placerat
pulvinar bibendum. Curabitur egestas tempor tortor fringilla suscipit. Cras
sed dignissim neque. Cras enim urna, hendrerit vitae venenatis a, feugiat
hendrerit urna. Quisque imperdiet, urna id mattis dignissim, sapien leo
ultrices mauris, vel interdum ligula ligula sit amet diam. Nunc hendrerit,
massa id blandit interdum, nibh magna ultrices ligula, nec mollis lectus
turpis id mauris. Etiam commodo risus eu metus egestas, sit amet accumsan
purus consequat. Curabitur dignissim turpis nulla, viverra auctor leo
interdum vel. Aenean sed quam est. Pellentesque laoreet consequat sem ac
sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
imperdiet, augue non porta auctor, neque augue tempus turpis, nec convallis
orci diam nec sapien. Mauris egestas porttitor nunc in accumsan. Nullam eu
massa vel neque suscipit pretium. Praesent dapibus ornare elit, gravida
tristique magna commodo in. Morbi id urna velit.</p>

0 个答案:

没有答案