I have a MVC View with a few images, each image has a link that links to a Form that is located on the bottom of the View, the Form has a <select>
filed that has to be populated based on the clicked link.
This is the div
on the top of the page with the images and the links:
<div class="propImg"><img src="images/1.jpg" alt="" /></div>
<a href="#lnkForm" class="serviceRequest">Customer Service Request</a>
</div>
<div class="propImg"><img src="images/2.jpg" alt="" /></div>
<a href="#lnkForm" class="serviceRequest">Customer Service Request</a>
</div>
And this is the form
in the bottom of the page:
<form id="formProperties">
<select id="properties" name="properties" class="required simple-dropdown txtbox">
<option value="">Select a Property</option>
<option value="1">100 Central Avenue</option>
<option value="2">220 Central Avenue</option>
</select>
</form>
This is the JavaScript function that on <a>
click toggles the page and takes the user to the form
:
$('a[href*=#]:not([href=#])').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
I'm not sure how to populate the <select>
based on the link that the user clicks.
For example: If the user clicked on the first link the <select>
should now has the 1
value, if the second <a>
- the <select>
should be set with 2
etc...
Any advice?
The divs of the images and the links look like that: (I removed some design elements to shorten it but I see it is necessary...)
<div>
<div class="propImg"><img src="images/1-test-RoadL.jpg" alt="" /></div>
<span class="txt15">
<br>
<strong>1 test Road</strong><br>
Piscataway, NJ
</span>
<span class="state">
<br>
12,477 SF<br>
</span><br>
<a href="#lnkForm" class="serviceRequest">Customer Service Request</a>
</div>
答案 0 :(得分:1)
试试这个。
$('.serviceRequest').on('click',function (e) {
var q = $(this);
var target = q.index('.serviceRequest')+1;
$("#properties option[value="+target+"]").prop("selected","selected");
e.preventDefault();
});
答案 1 :(得分:0)
如果你正在使用jquery,你可以为它创建自己的插件
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="test-select">
<option value="" selected>Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
<br />
<a href="javascript:void(0)" data-selectify="1" data-target="#test-select">Click to select 1</a>
<br />
<a href="javascript:void(0)" data-selectify="2" data-target="#test-select">Click to select 2</a>
&#13;
{{1}}&#13;
答案 2 :(得分:0)
根据已点击的链接,可以获取img文件名,并且可以使用下面的代码行选择img name选项。
var filename = $(this).prev().find('img').attr('src').split('/').pop().split('.')[0];
请查看以下工作片段。
$('a[href*=#]:not([href=#])').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
//Get filename from img tag based on the link clicked
var filename = $(this).prev().find('img').attr('src').split('/').pop().split('.')[0];
//Get selected option based on the link has been clicked.
$("#properties").val(filename)
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="propImg"><img src="images/1.jpg" alt="" /></div>
<a href="#lnkForm" class="serviceRequest">Customer Service Request</a>
</div>
<div class="propImg"><img src="images/2.jpg" alt="" /></div>
<a href="#lnkForm" class="serviceRequest">Customer Service Request</a>
</div>
<form id="formProperties">
<select id="properties" name="properties" class="required simple-dropdown txtbox">
<option value="">Select a Property</option>
<option value="1">100 Central Avenue</option>
<option value="2">220 Central Avenue</option>
</select>
</form>
&#13;