2015-08-13 3 views
0

Я хочу создать динамическую ссылку со значением, выбранным из html. следующий пример кода, который я мог сделать.создать динамическую ссылку с значением параметра выбора html

<select name="sequence" id="sequence" onChange="document.getElementById('selectedValue').innerHTML = this.value;"> 
    <option>file1</option> 
    <option>file2</option> 
    <option>file3</option> 

    </select> 

    <a href="data/file1"><span id="selectedValue"></span></a> 

Как создать эту ссылку динамически с помощью выбранной опции.

ответ

3

function changeLink(val){ 
 
    document.getElementById('selectedValue').innerHTML = val; 
 
    document.getElementById('link').href="data/"+val; 
 
}
<select name="sequence" id="sequence" onChange="changeLink(this.value);"> 
 
    <option>file1</option> 
 
    <option>file2</option> 
 
    <option>file3</option> 
 
</select> 
 

 
<a id="link" href="data/file1"><span id="selectedValue"></span></a>

+0

это работало отлично. – ChathuraG

0
onChange="document.getElementById('selectedValue').innerHTML = 'data/' + this.options[this.selectedIndex].text;" 
0
<select name="sequence" id="sequence" onChange="document.getElementById('selectedValue').innerHTML = this.value; 
document.getElementById('myLink').href = 'data/' + this.value;"> 
<option>file1</option> 
<option>file2</option> 
<option>file3</option> 

</select> 

<a id="myLink" href="data/file1"><span id="selectedValue"></span></a> 

См fiddle.

0

Demo: JSFiddle.

<script> 
    function change(e) { 
     console.log(e.value); 
     document.getElementById('selectedValue').innerHTML = e.value; 
    } 
</script> 
<a href="data/file1"><span id="selectedValue"></span></a> 

<select id="c1" onchange="change(this)"> 
    <option value="value-1">One</option> 
    <option value="value-2">Two</option> 
    <option value="value-3">Three</option> 
</select> 
0

Привет Я действительно думаю о разделении кода, так что я просто дать вам решение вашей проблемы в JSFiddle

https://jsfiddle.net/zjyLqLLx/

Вот ваш HTML, я просто изменить идентификатор на " «элемент к„промежутку“элемент для того, чтобы изменить URL слишком

<select name="sequence" id="sequence"> 
    <option>Default Text</option> 
    <option>file1</option> 
    <option>file2</option> 
    <option>file3</option> 

</select> 
<a id="selectedValue" href="Hola"> 
    <span>Some Default Value</span> 
</a> 

И ваш код Javascript

document.getElementById('sequence').addEventListener('change', function(){ 
    var selected = this.options[this.selectedIndex].text; 
    var link = document.getElementById('selectedValue'); 
    link.innerHTML = selected; 
    link.href = "data/" + selected; 
}); 

Это уже работает на JSFiddle

Смежные вопросы